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
-Links e imágenes
-Divs y css
-Formularios
-Tablas
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.
Code (html):
<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:
Code (html):
<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:
Code (html):
<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:
Code (html):
<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:
Code (html):
<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:
Code (html):
<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:
Code (html):
<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>
- Atributos de alineaciónPara alinear textos, encabezados, imágenes, divs, etc. Utilizamos los atributos CENTER, LEFT, RIGHT, JUSTIFY y se pueden utilizar de esta forma:
Code (html):
<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>
Iniciando en la creación de WebsEn 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)
Code (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>
Nota: 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
Code (html):
<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>
Nota: 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.
- Divs y css CSSEsta es la mejor parte del manual, donde aprendemos a hacer las Capas o los Divisores, como quieran llamarlos, y a darles estilo con css. Antes que nada les voy a explicar lo que es este lenguaje, CSS significa (Cascading Style Sheets) es un lenguaje artificial usado para definir la presentación de un documento estructurado escrito en HTML o XML. Hay tres formas de usar el css para nuestra web, utilizando una hoja de estilos externa, una hoja de estilos interna o simplemente utilizando un estilo en la línea. Voy a pasar a mostrarles las tres formas en que se utilizan las hojas de estilo.
Hoja de estilos externa Code (html):
<html>
<head>
<title>Hoja de estilos externa</head>
<link rel=”stylesheet” href=”style.css” type=”text/css” />
</head>
<body>
</body>
</html>
Nota: como pueden ver ahora utilizamos las etiquetas header, otra cosa solo en este ejemplo quiero mostrar las formas de usar las hojas de estilos en html. Si van a probar este ejemplo pongan el codigo que esta en el ejemplo de abajo en un archivo nuevo llamado style.css en el mismo directorio que el archivo html que estan utilizando.
Hoja de estilos internaCode (html):
<html>
<head>
<title>Hoja de estilos Interna</head>
<style type=”text/css”>
body{
Background-color: #000000;
}
</style>
</head>
<body>
</body>
</html>
Nota: en este ejemplo aparte de ver como se puede hacer nuestra hoja de estilos interna también se pueden ir familiarizando con el código css, que APRA los que saben inglés es muy fácil.
Estilo en líneaCode (html):
<html>
<head>
<title>Estilo en linea</head>
</head>
<body>
<p style="color:#665588;margin-left:20px;">Esto es un parrafo con estilo.</p>
</body>
</html>
Como pueden ver estas son las diferentes formas de usar css en nuestras páginas web. Bueno como este tema va de la mano de html para hacer diseños profesionales, ya que no es muy eficiente utilizar tablas, era necesario que lo explicara. De ahora en más voy a hacer muy breve la parte de los divs para poder seguir explicando otras cosas como formularios, o tablas. El tema del css y divs se va a ver más a fondo en el manual de css.
DivsLos divs son divisiones que al atribuirles estilos funcionan como tablas, pero a diferencia de las tablas son mas flexibles y mas eficientes a la hora de realizar un website. Otra función que tiene junto a las hojas de estilos es que nos ayudan a separar el diseño de la información.
Code (html):
<html>
<head>
<title> Creando una div con estilo</title>
<style type="text/css">
Body{
Background-color: #000000;
}
#prueba{
width: 300px;
height:200px;
Float:right;
Color:#555555;
Font-weight: bold;
Text-decoration: underline;
}
#prueba2{
Width: 500px;
Height: 100px;
Margin: 0px auto;
color: #ffffff;
Text-align: center;
Background-color: green;
border: 1px solid #ffffff;
}
</style>
<body>
<div id="prueba">
<p>Como pueden ver el texto toma la forma que le atribuí al div, abajo miren lo que pasa con el otro div al que le voy a dar color , borde y tamaño</p>
</div>
<div id="prueba2">
</div>
</body>
</html>
Nota: Como pueden ver aparece un cuadro de color verde con borde de 1px en blanco, y aparece otro cuadro transparente que contiene un texto con estilo, al decir con estilo me refiero al color y la decoración que definimos en el css.
Esto es lo mas usado para crear web sites, si quieren aprender mas sobre este tema estén atentos a la salida del video tutorial de
“Maquetación Web en Css y HTML” que estoy haciendo.
- Formularios Los formularios son los que, dentro de una web nos permiten enviar y solicitar información. Van entre las etiquetas
<form> y
</form>, dentro de la primer etiqueta
<form> se definen los parámetros
Action y
Method. En
Action se especifica el archivo o URL a donde el formulario enviará la información. En
Method se especifica la forma de envío, hay dos tipos de métodos de envío de información, el
POST y el
GET.
Poco a poco van a ir entendiendo para cual es la función o utilidad de los formularios, pero es otra de las cosas mas importantes de HTML porque luego esto es lo que nos ayuda a interactuar con
PHP.
Para insertar campos de entrada, que funcionan como variables en php, lo vamos a hacer entre las etiquetas
<input> y
</input>. Los parámetros que no deben faltar de los distintos tipos de
<input> son:
name y
type.
A continuación una lista con todos los parámetros de
<input>.
name --> En este campo nombraremos a la variable o input.
type --> En este campo especificaremos el tipo, puede ser text, radio, checkbox, password, submit y reset, esos son los que vamos a ver hay un par mas pero no son tan importantes.
value --> En este campo pondremos el valor del campo.
size --> En este campo especificaremos con un numero el tamaño, en caracteres, del input.
maxlenght --> En este campo se especifica el limite de caracteres que se pueden insertar en el input.
Code (html):
<html>
<head>
<title>Formulario</title>
</head>
<body>
<form action=”#” method=”post”>
<p>Input tipo texto con tamaño de 20 caracteres y un limite de 30 caracteres</p>
<input name=”texto” type=”text” size=”20” maxlenght=”30” ></input>
<p>Input tipo contraseña con tamaño de 20 caracteres y un limite de 20 caracteres</p>
<input name=”pass” type=”password” size=”20” maxlenght=”20” ></input>
<p>Input tipo radio </p>
<input name=”radius” type=”radio” ></input>
<p>Input tipo checkbox</p>
<input name=”check” type=”checkbox” ></input>
<p>Input tipo submit con Value enviar </p>
<input name=”env” type=”submit” value=”Enviar” ></input>
<p>Input tipo reset con value Resetear Formulario</p>
<input name=”resett” type=”reset” value=”Resetear Formulario” ></input>
</form>
</body>
</html>
Nota: Con este ejemplo van a entender cual es cada formulario y como funciona.
Campos de selecciónEste tipo de formulario es el que muestra una lista desplegable con varias opciones. Se escribe entre las etiquetas
<select> y
</select> y dentro de la misma se definen estos parámetros :
name,
size y
multipleCode (html):
<html>
<head>
<title>Campos de Selección</title>
</head>
<body>
<p>Prueba de campo de selección normal</p>
<select name=”prueba” size=”1” >
<option>Opcion1</option>
<option>Opcion2</option>
<option>Opcion3</option>
</select>
<p>Prueba de campo de selección no desplegable</p>
<select name=”prueba2” size=”3” >
<option>Opcion1</option>
<option>Opcion2</option>
<option>Opcion3</option>
</select>
<p>Prueba de campo de selección de selección múltiple</p>
<select name=”prueba3” size=”3” multiple=”multiple” >
<option>Opcion1</option>
<option>Opcion2</option>
<option>Opcion3</option>
</select>
</body>
</html>
Nota: Paso a explicar lo que se ve en el ejemplo 2 y 3. Cuando cambiamos el
size a un número superior a uno obtenemos un campo de selección no desplegable y al hacer esto podemos utilizar el parámetro
multiple que como ven en el ejemplo 3, permite realizar mas de una selección.
Áreas de TextoLas áreas de texto se definen entre
<textarea> y
</textarea>. Los parámetros de esta etiqueta son:
name,
cols,
rows y
wrap. Este último admite 2 tipos,
virtual y
physical y consiste en justificar el contenido, separándolo en líneas físicas con
physical o enviar todo el texto junto con
virtualCode (html):
<html>
<head>
<title>Areas de texto</title>
</head
<body>
<p>Area de texto con wrap virtual</p>
<textarea name=”prueba1” cols=”200” rows=”400” wrap=”virtual”>
</textarea>
<p>Area de texto con wrap physical</p>
<textarea name=”prueba2” cols=”200” rows=”400” wrap=”physical”>
</textarea>
</body>
</html>
- TablasLas celdas y filas de una tabla se definen entre las etiquetas
<table> y
</table>. Estas se definen fila a fila y celda a celda desde la celda superior izquierda, las columnas se calcularán automáticamente. Cada fila se dicta dentro de
<tr> y
</tr>.
<th> y
<td> con sus etiquetas de cierre
</th> y
</td> son utilizadas para indicar filas individuales dentro de una fila, la diferencia es que
<th> sirve como encabezado, ya que se visualiza en negrita.
Code (html):
<html>
<head>
<title>Tablas</title>
</head>
<body>
<table border="1">
<tr>
<th>Encabezado 1</th>
<th>Encabezado 2</th>
<th>Encabezado 3</th>
</tr>
<tr>
<td>bla 1</td>
<td> bla 2</td>
<td> bla 3</td>
</tr>
<tr>
<td> ble 1</td>
<td> ble 2</td>
<td> ble 3</td>
</tr>
</table>
</body>
</html>
Bueno de esta forma podemos concluir con esta guía básica de HTML, pero antes les dejo una evaluación la cual consta de dos partes, la práctica y la teórica.
Evaluación1]=- Como primer punto de la evaluación les voy a pedir que escriban el código de un header con esta imagen insertada, alineada a la izquierda, con fondo negro y con una barra de navegación con botones. No se tomará en cuenta si se puede visualizar bien en los navegadores o no, solo se tomará en cuenta el código escrito por el usuario. Las formas de envío del código son por PM o posteando en este tema.
2]=- Como segunda parte de la evaluación lean las siguientes afirmaciones y respondan Verdadero o Falso y justifiquen.
a) El código HTMl visible en el navegador va entre las etiquetas
<head>b) Hay 6 tipos de cabeceras
c) Los parámetros de la etiqueta
<font> son
size,
color,
faced) La etiqueta
<br> nos se utiliza para insertar imágenes.
e) La etiqueta
<p> con su respectivo cierre, además de definir un párrafo produce un salto de línea
f) El
target=”_blank” en un link abre el link en la misma ventana
g) Al insertar una imagen siempre hay que definir
border=”0”h) Hay 3 formas de insertar hojas de estilos CSS, Hoja externa, Hoja Interna y Hoja Media
i) La ventaja e los divisores frente a las tablas, es que son mas flexibles cuando los utilizamos con CSS
j) En los formularios,
Action especifica la forma de envío de los datos y
Method especifica la URL a donde el formulario enviará los datos
k) Hay 4 tipos de formularios
l) Las tablas se definen de columna en columna y las filas se definen automáticamente.
PD: Porfavor si van a postear esta guia en algun otro foro pongan la fuente porque es 100% mio el manual y no me gustaria que otra persona se haga pasar por el creador, Gracias por entederme.
Saludos!
Autor
En línea
aver si sacas uno un poqitin mas avanzado asi sigo practicando 
