Desarrollo web - conceptos generales.
Anatomía de una página web
Las instrucciones HTML están encerradas entre los caracteres: < y >.Muchos elementos HTML requieren una marca de comienzo y otra de finalización. Todo aquello que está fuera de las marcas del lenguaje se imprime en la pantalla (dentro del navegador).
La estructura básica de una página HTML es:
<html>
<head>
</head>
<body>
Cuerpo de la página.
</body>
</html>
Una página HTML es un archivo que generalmente tiene como extensión los caracteres html. Por ejemplo podemos llamar a nuestra primer página con el nombre: pagina.html (observar que no lleva acento).
Estos son los elementos básicos que toda página HTML debe llevar.
Si observamos toda página comienza con la marca:<html> y finaliza con la marca:</html>
Los fines de marcas tienen el mismo nombre que el comienzo de marca, más el caracter /
Una página HTML tiene dos secciones muy bien definidas que son la cabecera:
<head>
</head>
Y el cuerpo de la página:
<body>
Cuerpo de la página.
</body>
Todo el texto que dispongamos dentro del <body> aparece dentro del navegador tal cual lo hayamos escrito.
Todas las páginas tiene como mínimo esta estructura: cabecera y cuerpo.
Otra cosa importante es que el lenguaje HTML no es sensible a mayúsculas y minúsculas, es decir podemos escribirlo como más nos guste, además no requiere que dispongamos cada marca en una línea (podríamos inclusive escribir toda la página en una sola línea! cosa que no conviene ya que somos nosotros quienes tendremos que modificarla en algún momento).
Saltar de una línea a la otra
Todo el texto que disponemos en el cuerpo de la página aparece en la misma línea, no importa si cuando tipeamos la página disponemos cada palabra en la línea siguiente.
Para indicarle al navegador que queremos que continúe en la próxima línea debemos hacerlo con el elemento HTML <br />.
Cuando aparece la marca <br /> el navegador continua con el texto en la línea siguiente. Es uno de los pocos elementos HTML que no tiene marca de cerrado como habíamos visto hasta ahora.
Implementemos una página que muestre los nombres de distintos lenguajes de programación uno por línea:
<html>
<head>
</head>
<body>
PHP<br />
JavaScript<br />
Java<br />
C<br />
C++
</body>
</html>
Como vemos sólo hemos agregado la marca <br /> cada vez que queremos comenzar una línea. Tengamos en cuenta que es indistinto si disponemos la marca en la misma línea o en la siguiente:
PHP<br />
es lo mismo:
PHP
<br />
<br /> proviene de "break". Se puede usar <br> en lugar de <br /> pero es más correcto <br />
Párafo
Un párrafo es una oración o conjunto de oraciones referentes a un mismo tema. Todo lo que encerremos entre las marcas <p> y </p> aparecerá separado por un espacio con respecto al próximo párrafo.
Dentro de un párrafo puede haber saltos de línea <br />.
Veamos con un ejemplo como disponer dos párrafos:
<html>
<head>
</head>
<body>
<p>
SQL, Structure Query Language (Lenguaje de Consulta Estructurado) es un lenguaje
de programacion para trabajar con base de datos relacionales como MySQL, Oracle,
etc.<br>
MySQL es un interpretador de SQL, es un servidor de base de datos.<br />
MySQL permite crear base de datos y tablas, insertar datos, modificarlos, eliminarlos,
ordenarlos, hacer consultas y realizar muchas operaciones, etc., resumiendo: administrar
bases de datos.
</p>
<p>
Este tutorial tiene por objetivo acercar los conceptos iniciales para introducirse
en el mundo de las bases de datos.
</p>
</body>
</html>
Tenemos en esta página HTML dos párrafos, cuando el navegador interpreta esta página, separa los contenidos de los dos párrafos con un espacio horizontal. Además el primer párrafo contiene varios saltos de línea. Normalmente uno agrupa en párrafos para dar más sentido a nuestro escrito.
Cuando modificamos la ventana del navegador los párrafos se acomodan automáticamente de acuerdo al ancho de la ventana.
Si se pone una sola etiqueta <p> también genera un párrafo, es equivalente a <br /> cuando lo muestra el navegador. Sin embargo, a un párrafo se le pueden asignar propiedades: tamaño de letra, estilo de la letra, justificado y demás.
<p> se denomina por "paragraph"
Etiquetas <h1><h2><h3><h4><h5><h6>
El HTML utilizados son para indicar los títulos, que se declaran mediante estas etiquetas:
<h1><h2><h3><h4><h5><h6>
El título de mayor nivel es <h1>, es decir el que tienen una fuente mayor (veremos que es el navegador el responsable de definir el tamaño de la fuente, más adelante podrá ver que uno puede modificar la fuente, tamaño, color etc.)
Según la importancia del título utilizaremos alguno de estos elementos HTML. Requiere la marca de cerrado del título con la barra invertida como hemos visto.
Confeccionaremos una página que contenga un título de primer nivel <h1> y luego dos títulos de nivel <h2>. Definiremos un párrafo para cada título de segundo nivel.
pagina1.html
<html>
<head>
</head>
<body>
<h1>Tipos de datos en MySQL</h1>
<h2>varchar</h2>
<p>
se usa para almacenar cadenas de caracteres. Una cadena es una secuencia de caracteres.
Se coloca entre comillas (simples): 'Hola'.<br>
El tipo "varchar" define una cadena de longitud variable en la cual
determinamos el máximo de caracteres. Puede guardar hasta 255 caracteres.
Para almacenar cadenas de hasta 30 caracteres, definimos un campo de tipo varchar(30).
</p>
<h2>int</h2>
<p>
Se usa para guardar valores numéricos enteros, de -2000000000 a 2000000000
aproximadamente.<br> Definimos campos de este tipo cuando queremos representar,
por ejemplo, cantidades.
</p>
</body>
</html>
Cada título aparece siempre en una línea distinta, no importa si lo escribimos seguido en el archivo, es decir el resultado será igual si hacemos:
<h1>Tipos de datos en MySQL</h1>
<h2>varchar</h2>
o esto:
<h1>Tipos de datos en MySQL</h1><h2>varchar</h2>
El navegador dispone cada título en una línea nueva.
Recordemos que el HTML no tiene la responsabilidad de indicar el tamaño de las fuentes. El navegador definirá el tamaño de fuente según el nivel de título que indiquemos. La de tamaño más grande es la de nivel 1 <h1>.
<h1> sería una abreviatura de heading
Itálicas y negritas
Enfatizar algo significa realzar la importancia de una cosa, por ejemplo una palabra o conjunto de palabras.
Así como tenemos seis niveles de títulos para enfatizar un bloque contamos con dos elementos que son (<em> <strong>)
El elemento de mayor fuerza de énfasis es strong y le sigue em
Veamos un ejemplo del empleo de estos dos elementos HTML:
<html>
<head>
</head>
<body>
<p><strong>Típos de datos</strong> en MySQL</p>
<p><em>TEXTO</em>: Para almacenar texto usamos cadenas de caracteres.
Las cadenas se colocan entre comillas simples. Podemos almacenar dígitos
con los que no se realizan operaciones matemáticas, por ejemplo, códigos
de identificación, números de documentos, números telefónicos.
Tenemos los siguientes tipos: varchar, char y text.</p>
<p><em>NUMEROS</em>: Existe variedad de tipos numéricos
para representar enteros, negativos, decimales. Para almacenar valores enteros,
por ejemplo, en campos que hacen referencia a cantidades, precios, etc., usamos
el tipo integer. Para almacenar valores con decimales utilizamos: float o decimal.</p>
<p><em>FECHAS Y HORAS</em>: para guardar fechas y horas dispone
de varios tipos: date (fecha), datetime (fecha y hora), time (hora), year (año)
y timestamp.</p>
</body>
</html>
Podemos ver que la sintaxis para el elemento strong es:
<strong>Típos de datos</strong>
La mayoría de los navegadores muestran el texto enfatizado con strong con un texto en negrita y para el elemento em utilizan letra itálica (de todos modos esto no es obligatorio, pero seguramente mostrarán los textos enfatizados).
Otra cosa importante que podemos hacer notar es que estos elementos HTML no producen un salto de línea como los de título (h1,h2 etc.)
Para recordar el nombre de estos elementos HTML:
<em> viene de empathize que significa énfasis.
<strong> viene de strong que significa fuerte.
Notas acerca del SEO: Google indexa a las páginas según la importancia que nosotros le damos al texto. Es por eso que se pone entre <h1></h1> aquello por lo que queremos que nos encuentren. Lo mismo pasa con <strong> y <em>.
Facil y simple formulario de contacto con HTML5, CSS y PHP
ResponderEliminarhttp://manuelbaronetti.com.ar/blog/2013/02/facil-y-simple-formulario-de-contacto-con-html5-css-y-php/
http://manuelbaronetti.com.ar/blog/
ResponderEliminar