Buenas estoy haciendo un manual en HTML y kiero que lo vean y que me den sus críticas
Contenido:
Introducción
Estructura de un documento HTML
Cuerpo de un documento
- Encabezados
- Color y tamaño
- Tipo de letra
- Definir párrafos
- Atributos de alineación
Iniciando en la creación de Webs
- Link e imágenes
Introducción:Lo que pretendo con este manual, es que cuando ustedes ya lo hayan leído, puedan crear su propio website en html. Este Manual hecho por mi, lo voy a estar actualizando de a poquito porque estoy a full con otros manuales también.
Para este manual vamos a necesitar:
* Block de notas o Dreamweaver.
* Tener habilitado para poder ver las extensiones de los archivos.
Estructura de un documento HTML:
En un documento html nos vamos a encontrar con 3 etiquetas comunes que son:
<html> <head> y <body>. Bueno les voy a mostrar un ejemplo y después explico un poco el código.
<html>
<head>
<title> Estructura da un documento HTML </title>
</head>
<body>
<h1> Esto es una Cabecera </h1>
<!-- Esto es un comentario-->
</body>
</html>
Les voy a explicar un poco. Las etiquetas se escriben entre <> por ejemplo “<nombre de la etiqueta>” y para cerrar una etiqueta se pone “</nombre de la etiqueta>”.
Ahora empezamos con la explicación del código “<html>” y “</html>” indican cual es el lenguaje de programación que se esta utilizando entre estas etiquetas. “<head>” y “</head>” indican que dentro de esas 2 etiquetas se define la cabecera, que por ahora solo la van a usar para definir el titulo como esta hecho en el código con las etiquetas “<title>” y “</title>”, y mas adelante las utilizaran para enlazar archivos CSS y algo de PHP pero eso va a otros manuales. Y por ultimo entre las etiquetas “<body>” y “</body>” es donde vamos a declarar el cuerpo de nuestra pagina web, donde vamos a insertar imágenes, links, tablas, etc.
Cuerpo de un documento:Nos vamos a meter ahora en todo lo que esta entre las etiquetas BODY, el cuerpo y diseño de tu web, mas adelante especificaremos la cabecera porque es mas corta y
Nos sirve mas adelante.
- EncabezadosEn Html tenemos la etiqueta Hx que nos sirve para elegir entre diferentes tamaños de encabezados, “H” seria la etiqueta y “x” es un número que puede variar del 1 al 6 y cuando cerramos la etiqueta se produce un salto de línea, para que lo vean mejor les voy a dejar un ejemplo:
<html>
<head>
<title>Prueba Encabezados</title>
</head>
<body>
<h1>Encabezado H1</h1>
<h2>Encabezado H2</h2>
<h3>Encabezado H3</h3>
<h4>Encabezado H4</h4>
<h5>Encabezado H5</h5>
<h6>Encabezado H6</h6>
</body>
</html>
- Color y tamaño de fuenteEn este lenguaje de programación también se puede cambiar el tamaño de la letra con la etiqueta FONT SIZE que tiene un valor, el predeterminado es 3 , este valor puede variar del 1 al 7 y se pone de esta forma:
<html>
<head>
<title>Prueba Tamaño letra</title>
</head>
<body>
<font size=1>a</font><br />
<font size=2>a</font><br />
<font size=3>a</font><br />
<font size=4>a</font><br />
<font size=5>a</font><br />
<font size=6>a</font><br />
<font size=7>a</font><br />
<!--y se pueden hacer cosas como estas -->
<font size=1>a</font><font size=2>a</font><font size=3>a</font>
<font size=4>a</font><font size=5>a</font><font size=6>a</font>
<font size=7>a</font>
</body>
</html>
Nota: En el ejemplo anterior, usé la etiqueta BR y lo que hace es hacer un salto de línea.
También podemos encontrar el atributo COLOR que como dice su nombre, le da color al texto, el color se puede expresar en hexadecimal o en palabras como en este ejemplo:
<html>
<head>
<title>Prueba Color Letra</title>
</head>
<body>
<font size=5 color=”RED”>Color RED</font><br />
<font size=5 color=”#333333”>Color #333333</font>
</body>
</html>
- Tipo de letraExiste el atributo FACE para la etiqueta FONT, este lo que hace es cambiarle la fuente al texto por la que nosotros elijamos y se utiliza de esta manera:
<html>
<head>
<title>Prueba Tipo de letra</title>
</head>
<body>
<font face=”arial”>Por ejemplo este texto es arial</font><br />
<font face=”verdana”> Este texto esta en verdana</font>
</body>
</html>
Y para terminar con los textos dejo en claro que todos los atributos de FONT pueden ir juntos en la etiqueta, por ejemplo:
<html>
<head>
<title>Todos los atributos juntos</title>
</head>
<body>
<font size=5 color=”red” face=”Verdana”>Aca tenemos un texto con todos los atributos</font>
</body>
</html>
-Definir PárrafosPara definir los párrafos se utiliza la etique P el cierre e la etiqueta es obligatorio en la nueva versión de XHTML, esta etiqueta acepta atributos de alineación como por ejemplo:
<html>
<head>
<title>Definir parrafos</title>
</head>
<body>
<p align=”Center”>este es un parrafo un parrafo muy largo que no termina , bueno este manual es de area403.com.ar y bue este es el ejemplo del manual de html.</p>
<p align=”left”> y este es un parrafo con <br />
Salto de línea aaaaaaaaaaaaa aaa </p>
</body>
</html>
Para alinear textos, encabezados, imágenes, divs, etc. Utilizamos los atributos CENTER, LEFT, RIGHT, JUSTIFY y se pueden utilizar de esta forma:
<html>
<head>
<title> Alineación </title>
</head>
<body>
<p align=”center”> parraaaaaaaaaaaaaaaaaaa aaaaaaaaaaafoooo<br /> aaaaaaaaaaaaa aaa paraaaaaaaaaaaaaaaaaaa aaaaaaaaaaafooooaaaaaaaaaaaaa aaa paraaaaaaaaaaaaaaaaaaa aaaaaaaaaaafooooaaaaaaaaaaaaa aaa paraaaaaaaaaaaaaaaaaaa aaaaaaaaaaafooooaaaaaaaaaaaaa aaa </p>
<p align=”left”> parraaaaaaaaaaaaaaaaaaa aaaaaaaaaaafoooo<br /> aaaaaaaaaaaaa aaa paraaaaaaaaaaaaaaaaaaa aaaaaaaaaaafoooo aaaaaaaaaaaaa aaa paraaaaaaaaaaaaaaaaaaa aaaaaaaaaaafooooaaaaaaaaaaaaa aaa paraaaaaaaaaaaaaaaaaaa aaaaaaaaaaafooooaaaaaaaaaaaaa aaa </p>
<p align=”right”> parraaaaaaaaaaaaaaaaaaa aaaaaaaaaaafoooo<br /> aaaaaaaaaaaaa aaa paraaaaaaaaaaaaaaaaaaa aaaaaaaaaaafooooaaaaaaaaaaaaa aaa paraaaaaaaaaaaaaaaaaaa aaaaaaaaaaafooooaaaaaaaaaaaaa aaa paraaaaaaaaaaaaaaaaaaa aaaaaaaaaaafooooaaaaaaaaaaaaa aaa </p>
<p align=”justify”>parraaaaaaaaaaaaaaaaaaa aaaaaaaaaaafoooo<br /> aaaaaaaaaaaaa aaa paraaaaaaaaaaaaaaaaaaa aaaaaaaaaaafoooo aaaaaaaaaaaaa aaa paraaaaaaaaaaaaaaaaaaa aaaaaaaaaaafooooaaaaaaaaaaaaa aaa paraaaaaaaaaaaaaaaaaaa aaaaaaaaaaafooooaaaaaaaaaaaaa aaa </p>
</body>
</html>
En esta parte del manual, vamos a empezar a ver como se insertan links, imágenes y los atributos de cada una de estas etiquetas, también veremos el uso de los formularios y el uso de divs, o capas que son lo mismo para luego relacionarlas con css y poder tener nuestro website diseñado en xhtml y css.
- Links e imágenesPara insertar los links vamos a utilizar las etiquetas
a , para agregarle el link a esta etiqueta tenemos que poner
href= y entre comillas ponemos el link a donde queremos que vaya nuestro texto o imagen, también le podemos agregar el atributo
target para que el link se abra de diferentes formas, este contiene cuatro opciones:
_blank (se abrirá en otra ventana)
_self (se abrirá en la misma ventana)
_parent (se abre en el frame en que esta ubicado, si es que la web tiene frames)
_top (se abre en toda la pantalla haciendo que desaparezcan los frames que había en la web, solo utilizar si hay frames en nuestro archivo html)
<html>
<head>
<title> Links – Area 403 - </title>
</head>
<body>
<a href=”http://www.area403.com.ar” target=”_blank”><h1>LINK! En otra ventana</h1></a>
<-- No agregamos </br> porqueel h1 ya hace un salto de linea !-->
<a href=”http://www.area403.com.ar” target=”_self”><h1>LINK! En Misma ventana</h1></a>
<a href=”http://www.area403.com.ar” target=”_parent”><h1>LINK! Con targent parent</h1></a>
<a href=”http://www.area403.com.ar” target=”_top”><h1>LINK! Con top</h1></a>
</body>
</html>
No se hagan drama si no entienden bien lo de los frames lo voy a explicar mas adelante.
Para insertar imágenes vamos a utilizar la etiqueta
img, tiene distintos atributos como por ejemplo width (Ancho) height (Alto) border , align , y los mismos para las alineaciones. Bueno pasemos a mostrar como funciona
<html>
<head>
<title> Insertar imágenes – Area 403 - </title>
</head>
<body>
<img src=”http://area403.com.ar/img/area_02.png” width=”500px” height=”30” border=”0” />
<img src=”http://area403.com.ar/img/area_02.png” border=”0” align=”center”/>
<img src=”http://area403.com.ar/img/area_02.png” border=”0” align=”left”/>
<a href=”[url=http://www.area403.com.ar]www.area403.com.ar[/url]”><img src=”http://area403.com.ar/img/area_02.png” border=”0” align=”center”/></a>
</body>
</html>
cuando no especificamos ni largo ni ancho la imagen toma su tamaño natural, en el ultimo ejemplo agregue un link a la imagen para que vean como se hace, el atributo border=”0” nos sirve para que cuando pongamos link a una imagen no se agregue un borde azul de 1 px.
Este manual se va a ir actualizando de a poquito.
PD: Porfavor si van a postear esta guia en algun otro foro pongan la fuente porque la estoy haciendo yo y no me gustaria que otra persona se haga pasar por el creador, Gracias por entederme.
Saludos!
Para preguntas, 
para aportes, 
para temas resueltos
Autor