Muy buenas MinForeros, después de un largo tiempo, he decidido crear una serie de guías que iré desarrollando de poco a poco, para que todo el que quiera, pueda empezar en este fantástico mundo del desarrollo web y todas las posibilidades que éste nos permite.
Esta guía se enfocará exclusivamente en
HTML.
HTML (HyperText Markup Language / Lenguaje de Marcado de Hipertexto), es un lenguaje de etiqueta con el que se escribe TODAS las páginas webs. He de resaltar que HTML, NO es un lenguaje de PROGRAMACIÓN, si no de ETIQUETA, que son conceptos TOTALMENTE DIFERENTES.
Lenguajes de programación WEB, pueden ser por ejemplo: PHP, JavaScript, JAVA, Perl, Ruby, ASP, entre otros...
Lenguajes de marcado y estructura: HTML, CSS, XML entre otros muchos.
A continuación dejaré una lista de herramienta que podréis usar para emprender el aprendizaje a este fantástico lenguaje:
-
Notepad++:
http://notepad-plus-plus.org/download (Esta herramienta es un simple bloc como puede ser un documento de texto, solamente que enriquecido con muchísimas funciones para el desarrollo de webs e incluso software (Pero es muy poco aconsejable usarlo para desarrollar softwares).
-
SublimeText: Esta herramienta es de pago, por lo tanto no facilitaré ninguna URL, para su descarga. Si la queréis podréis buscarla por internet y su crack correspondiente. (Recomiendo las versiones 2 o 3)
-
DreamWeaver: Un entorno de desarrollo web MUY potente, que te será MUY útil a la hora de empezar a desarrollar webs, pero un tanto de lo mismo. Es de pago por lo tanto no puedo facilitar una URL para obtenerlo, deberéis buscar por google con su correspondiente crack. (Recomiendo la versión CS6 o posteriores)
-
Bloc de notas (Viene de serie en TODOS los sistemas operativos): Incluso en un simple bloc de nota podéis programar, pero es lo ÚLTIMO que os aconsejo, ya que en el bloc de nota te costará un poco más distinguir las etiquetas de los atributos e incluso te será muy incomodo programar ahí, y muy poco profesional, así que NO te recomiendo que desarrolles nada en un bloc de nota corriente.
Nota: Hay muchas más herramientas de desarrollo, pero estas son un ejemplo y las que recomiendo, excepto el Bloc de notas, que solo es para avisar de que esta herramienta aunque valga para tal, pero no es recomendable usarla.
Empezaremos aclarando conceptos básicos sobre este lenguaje.
HTML es muy parecido a los famosos BBCodes, que podemos apreciar cuando creamos un mensaje en la parte superior, para editar el texto (Ej:
Texto en negrito (En caso de HTML sería <b>Texto en negrito</b>). Pero NO igual del todo.
Todas las etiquetas en HTML empiezan por < y terminan en > (Por ej: <b>, <u>, <i> etc...) ,también tenéis que saber que siempre de empezar por una de estas etiquetas se debe cerrar de igual forma con "/" (Por ej: <b></b>, <u></u>, <i></i>), de lo contrario el efecto de la etiqueta abarcará más contenido del deseado.
También hay que saber que hay etiquetas de cierre en si misma, por ejemplo <img src="" alt"" />, <input /> <br /> etc....
Ejemplo:
Solo quiero que este en negra esta parte, y esta que esté normal.
Arriba hemos cerrado bien la etiqueta hasta donde deseamos que la etiqueta HTML haga su efecto.
Un mal uso sería por ejemplo:
Solo quiero que este en negra esta parte, y esta que esté normal.
Como veis se ha resaltado en negro, la parte no deseada, por lo tanto hay que saber controlar muy bien las etiquetas HTML, por lo tanto siempre id con cuidado a la hora del desarrollo de la web. Pero en esta guía irás aprendiendo a no cometer estos pequeños errores.
Totalmente ajeno a todo esto os recomiendo que instaléis un host local, (un servidor que simula un host donde alojar páginas webs sin necesidad de internet y que solo verás tu únicamente. (Esta es la explicación fácil para que entendáis. Es mucho más extenso, pero con que sepáis esto y lo entendáis me basta.)
Podéis usar:
XAMPP (El que uso yo desde siempre. Así que os recomiendo este, solo tenéis que descargarlo en la siguiente URL y ya mirar algún vídeo donde te enseñe a instalarlo y aprender a alojar páginas webs, (que lo que alojas son archivos en una carpeta y el navegador interpreta los archivos como página web según lo que hayas codeado(código escrito).
Descarga de XAMPP:
https://www.apachefriends.org/es/download.htmlDejando conceptos atrás, empezaremos con la práctica.
TEMA 1 - ESTRUCTURA Y ETIQUETAS PRIMARIASSIEMPRE que vayáis a codear una web debe seguir la misma estructura para que el navegador sepa que se trata de una página web, sino, no lo sabrá y no seguirá el standar web(Que tu "web" no se tomará como una página web, ya que no sigue el patrón definido)
Estructura de un documento HTML.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
<!DOCTYPE html>: Describe el tipo de cifrado del HTML que usa este documento. En este caso HTML5 y que sigue el standar web.
<html>: Con esta etiqueta indicaremos que nuestro documento será una página web y así el navegador lo podrá interpretar de forma correcta.
<head>: La cabecera de la web es donde podremos hacer modificaciones indirectas en nuestra web, como cambio de codificaciones, incluir otros archivos CSS y JavaScript incluso incluir tipográfias desde google para usarlas en la web y extender las funciones de nuestra web.
<body>: Aquí es donde estará TODO el contenido de la página web que se mostrará en el navegador, desde texto hasta imágenes, vídeos etc...
Hay que aclarar que para un desarrollo limpio y bien organizado se recomienda usar este estilo de estructura jerárquico (Que algunas etiquetas, están dentro de otras como en caso de <head> y <body> están dentro de <html>, y darle 4 espacios o en la tecla de tabulación(Tab), para que la escritura de la web sea más fácil de leer.
Y <title></title>, que se encuentra dentro de <head></head>, es el título que se mostrará en la pestaña del navegador.
Ejemplo:
("Modificar mensaje").
Nota importante: De todos los archivos que tengas en la carpeta, el primero que saldrá como portada en tu web, será el que se llame index.html.
index, es el nombre clave que interpretará el navegador como archivo a mostrar primero.
Y el documento se puede guardar en dos formatos si únicamente es HTML. En .html o .htm.
TEMA 2 - ATRIBUTOSUn atributo es un parámetro que se le da a una etiqueta para que ésta adquiera más funcionalidades y valores para modificar el contenido dentro de dichas etiquetas.
TODA etiqueta tiene o puede tener atributos. Hay algunas que SIEMPRE deben tener atributos.
Por ejemplo:
<a></a>: Esta etiqueta sirve para crear vínculos entre archivos (Url), para que de por ejemplo index.html vaya a registro.html, pero para ello, debemos añadirle el atributo,
href="", y para que éste lleve a otro archivo o web ajena, debemos ponerle la ruta, de la siguiente forma:
Con este método trazaremos una ruta hacía un archivo alojado dentro del host. Donde tienes todos los archivos de la web, especifícamente.
<a href="registro.html">Registro</a>Por otra parte, podemos especificar una URL ajena a donde tienes todos los demás archivos.
Ejemplo: Yo quiero que desde mi web, haya un botón que me lleve hacía Facebook, por lo tanto sería de la siguiente forma.
<a href="
http://facebook.com">Facebook</a>
Nota: La palabra dentro de las etiquetas <a>, es con la que dándole click, nos llevará a la URL especificada
Un ejemplo para que lo entendáis finalmente:
FacebookSiempre que se trate de un hipervinculo hacía una web ajena a la tuya, debes especificar el protocolo "http://", para que tu navegador entienda que tratas de redireccionar hacía otra web, que es totalmente ajena a la tuya.
También podemos practicar con la etiqueta <img />; que como veis, se cierra en si mismo, ya que no necesitas almacenar nada dentro de ella, solo mostrar algo único, como lo es una imagen en este caso.
A esta etiqueta le añadiremos el atributo src="", que servirá para especificar el origen de la imagen que se desea mostrar en tu web, os lo enseñaré con un pequeño ejemplo:
<img src="imagen.png" />
En este ejemplo de arriba, vemos como desde el documento HTML, mostramos una imagen que en este caso está alojada en el mismo lugar que los demás archivos HTML de nuestra web.
Al igual que en la etiqueta <a>, también podemos mediante el atributo src="" mostrar una imagen desde otra web, sin tener que tenerla en tu carpeta.
Nota importante: Esto está muy bien a la hora de ahorrar espacio en tu host, ya que la extraes de otro sitio web y no de tu host, pero si esa web de donde extraes la imagen se cae, cierra u algún otro motivo por el cual desaparezca esa web, tus imágenes también desaparecerán, por lo tanto siempre es bueno que lo tengas todo en tu host, para evitar futuros problemillas.
Para aclarar confusiones, os compararé los atributos entre href="" y src="".
Ambos atributos sirven para lo mismo. Incluir entidades tales como imágenes, archivos HTML, CSS, JavaScript(js).
El caso es que siempre que se trate de <a>, uséis href=", ya que indica el protocolo http. h(http)ref(reference)="".
Y en caso de src="", lo podéis usar en <img />,<link>,<meta>,<iframe> y cualquier otra etiqueta en la que añadas un archivo y no una web.
También un claro ejemplo son los atributos de los <input />
La etiqueta <input />, sirve para crear un área de texto, como los que usamos en cualquier página para logearnos o escribir.
<input />:
<input type="text" />: Especificamos de que tipo es, que en este caso sería de tipo texto normal y se visualizaría como el de arriba.
<input type="password" />:
,en esta imagen especificamos que este input es de tipo "password", por lo tanto todo lo que se escriba en el, será ocultado por estos puntitos negros para evitar que la gente vea la contraseña.
<input type="email" />: Éste atributo "email", hará que sea obligatorio añadir como mínimo una "@", para validar en cierta parte que se trata de un email.
<input type="checkbox" />: 
,con el atributo "checkbox", te convertirá el input en el típico cuadradito para seleccionar o deseleccionar, por ejemplo: Cuando te logeas en alguna web y hay un botoncito de estos debajo del formulario, para guardar datos o recibir datos sobre dicha web.
<input type="date" />:
, con este atributo "date", convertimos el input en un input con un calendario deslizable donde podrás añadir fechas como puede ser cuando creas un registro y especificas cuando nació dicho usuario que se va a registrar.
<input type="color" />:
, con este atributo "color", convertimos el input en una paleta de colores, que podemos usar en formularios de registro para cambiar el color de la letra y si sabes de JavaScript para complementar, podemos hacer incluso juegos y herramientas.
Hay una gran variedad de atributos con los que se podrá editar los <input> y muchas más etiquetas, como puede ser estos 2 imprescindibles atributos, a la hora de maquetar tu web y añadirle efectos con JavaScript o mismamente hacer sistemas con PHP.
Que son:
id="" y
class=""id: Éste atributo se utiliza para referirse a elementos únicos y en CSS y JavaScript las ids, se representan con "#" de prefijo. (Ej: #logo { ... })
class: Éste atributo se utiliza para referirse a varios elementos que se repiten en el documento o en general, y en CSS y JavaScript, se representa con "." de prefijo" (Ej: .logo { ... })
Como consejo personal. No temáis de los tantísimos atributos que hay, eso con su uso, se van aprendiendo poco a poco, pero lo aprendéis, no os preocupéis por eso
, es normal que las primeras veces os eché hacía atrás esto, pero es muy sencillo. También cabe la posibilidad que no os acordéis de algún atributo especifico para una etiqueta en concreto, pero lo miráis una, dos, tres o las veces que hagan falta hasta que lo tengas en la cabeza.
En conclusión con este tema de atributos.. hay muchos atributos, podría decir que incluso cientos, pero no pasa nada, no usaréis todos ni la mitad, os lo aseguro. Y en el caso, se aprenden y adiós problema
Debo irme pero en cuanto vuelva seguiré con el desarrollo de la GUÍA, hasta aclarar todo y que aprendáis lo máximo posible.Linkback: https://minecraftmin.net/index.php?topic=1712.0
Conectarse
Registrarse
Inicio
Ayuda
MinClub
MinShop
Share Topic
Tema: [HTML] Primeros pasos en HTML. [En CONSTRUCCIÓN] (Leído 16198 veces)
Febrero 12, 2015, 10:37:46 pm