Buscar este blog

viernes, 5 de agosto de 2011

101 Web Page

Conozco muchos diseñadores de sitios web que no saben HTML, utilizan programas como dreamweaver, webexpress y otros y solo colocan un "texbox" o un "texarea", un "dropdown" pero no saben como va colocado ese código en la parte no visual o sea en el HTML.

Conozco muchos programadores web que van por la misma línea, se han preocupado tanto en conocer el PHP que se olvidaron de conocer lo básico el HTML.

Hay una pequeña línea divisoria entre los programadores y los diseñadores, algunos programadores se la saltan fácilmente, muy pocos diseñadores hacen ésto. Pero los que estamos en ambos lados, los de la vieja escuela que tuvimos que aprender a programar sin nada visual podemos conocer tanto la parte diseño como la parte desarrollo. Eso es bueno porque al momento de corregir un error y que no contamos con una herramienta adecuada le entramos con un notepad o un vi para modificar y listo.

Que pretendo decir? pues que de algún modo debemos conocer aunque sea lo básico de lo que estamos haciendo. Por ejemplo hace unos día leí este artículo: http://www.codigogeek.com/2011/08/02/wireframe-la-manera-correcta-de-disenar/ y el sabe que eso es lo básico, sin esa estructura inicial no podemos avanzar y no quiere decir que tomemos un software de diseño, antes lo hacíamos en servilletas o en "tickets de bus". Bueno la idea es que debemos conocer los cimientos y para ello:

HTML no es considerado un lenguaje de programación, creo que ni siquiera un script, incluso los comandos no se llaman comandos sino que tag, bueno pero es poco lo que realmente necesitamos aprender.


  1. Existen tag únicos y  tag que se escriben en pareja,  por ejemplo el cambio de línea <br /> es un tág que se escribe así nada más, pero el tag <div> tiene su inicio y su final </div> y abarca todo lo que va entre el <tag> y </final del tag>
  2. una página web es un archivo texto que es interpretado y contiene una repetición de pocos tag de HTML (interpretado quiere decir que el web explorer toma el tag mira que significa y nos pone el resultado en pantalla)
  3. toda página empieza con el tag <html> y termina con el tag </html>
  4. toda página tiene 2 secciones head y body, el head es donde van instrucciones para el interprete, para el web explorer, para otros programas que leen nuestra página y el body es donde va todo lo que mostramos al usuario, nuestra página queda así:  <html><head></head><body></body></html>
  5. entre el head nos interesa conocer el tag title <title>lo que muestra en la barra del web explorer</title>, luego conoceremos el meta, el script y otros, pero para esta clase es el único que nos interes. La página se miraría así:  <html><head><title>lo que muestra en la barra del web explorer</title></head><body></body></html>
  6. en el body podemos escribir cualquier cosa y otros tag:  <html><head><title>lo que muestra en la barra del web explorer</title></head><body>Cualquier cosa</body></html>
  7. los tag más importantes son: <br> cambio de línea, <img src="archivo"> imagen que va a mostrar, <a href="pagina a donde ir">link</a> un link o hipervinculo, <div>texto</div>, cuadro de texto o espacio para poner otros tag (contenedor)  <html><head><title>lo que muestra en la barra del web explorer</title></head><body>Cualquier cosa<br><img src='imagen.jpg'><br><a href='http://infowebsa.blogspot.com'>aprender</a><br><div>otros tag, otro texto<br>otras imagenes</div></body></html>
  8. Con estos tag básicos (pósiblemente agregando <table que es una especie de cuadrícula) se puede crear una página html, visualmente bonita, sin efectos, pero bonita
  9.  <input ... que es algo complicado pero nos sirve para poner nuestros textbox de captura, los radio y check, captura de password <input type="text"> igualmente el <select que nos sirve para poner combobox o dropdown y listas. Estos los explicaremos luego
  10. Al final nuestro html de página se mirará así:
<html>
<head>
<title>lo que muestra en la barra del web explorer</title>
</head>
<body>
Cualquier cosa<br>
<img src='imagen.jpg'><br>
<a href='http://infowebsa.blogspot.com'>aprender</a><br>
<div>otros tag, otro texto<br>otras imagenes</div>
</body>
</html>

Copiemos este código en un archivo texto y gravemos con extensión htm, lo ejecutamos  en un web explorer y ya tenemos nuestra primera web page...


Saludos

No hay comentarios:

Publicar un comentario