Creación de Páginas Web
Objetivo:
Aprender a crear páginas web desde el inicio, de forma práctica, conociendo los estandares y las mejores prácticas para realizar esta tarea
A continuación se comparte la estructura básica de como elaborar una pagina web, facilitada por el catedrática.
Un documento en HTMl debería tener esta
estructura básica, y, a partir de este se podrá generar la maqueta de elementos
para formar nuestro diseño en HTML, ya sea mediante el uso de tablas o con el
uso de DIVs y con código CSS posicionar y dar formato a estos, el código es el
siguiente:
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
Donde
<html> Indica el inicio del documento.
<head> Inicio de la cabecera.
<title> Inicio del título del documento.
</title> Final del título del documento.
</head> Final de la cabecera del documento.
<body> Inicio del cuerpo del documento.
</body> Final del cuerpo del documento.
</html> Final del documento.
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
Donde
<html> Indica el inicio del documento.
<head> Inicio de la cabecera.
<title> Inicio del título del documento.
</title> Final del título del documento.
</head> Final de la cabecera del documento.
<body> Inicio del cuerpo del documento.
</body> Final del cuerpo del documento.
</html> Final del documento.
Cómo
poner el título a un documento HTML
Para
poner el título a un documento html, hacemos uso la viñeta <title> que
debe ir colocado dentro del encabezado del documento, es decir, entre los
tags<head>.
Aquí
el ejemplo:
<html>
<head>
<title>Título de la página, es lo que se despliega en la parte superior izquierda del navegador.</title>
</head>
<title>Título de la página, es lo que se despliega en la parte superior izquierda del navegador.</title>
</head>
<body>
<p>Cómo poner el título a un documento HTML</p>
</body>
<p>Cómo poner el título a un documento HTML</p>
</body>
</html>
listas numeradas en html
Mediante
la etiqueta <ol> podemos generar listas con elementos numerados
y ordenar los elementos que queramos y/o necesitemos, pero necesitamos también
del uso del tag <li> para cada opción de nuestra lista, para
generarlas nos podemos basar en el siguiente código como ejemplo de listas numeradas en HTML:
<oltype=”1” start=”10”>
<li> El Salvador </li>
<li> Guatemala </li>
<li> Honduras </li>
<li> Nicaragua </li>
<li> Costa Rica </li>
<li> Belice</li>
</ol>
Donde type es el tipo de lista que puede ser 1; numéricamente, a; letras minúsculas,
A ;letras mayúsculas, i; números romanos minúsculas y I; números romanos en mayúsculas, y start es el numero o valor donde comenzara nuestra lista.
<oltype=”1” start=”10”>
<li> El Salvador </li>
<li> Guatemala </li>
<li> Honduras </li>
<li> Nicaragua </li>
<li> Costa Rica </li>
<li> Belice</li>
</ol>
Donde type es el tipo de lista que puede ser 1; numéricamente, a; letras minúsculas,
A ;letras mayúsculas, i; números romanos minúsculas y I; números romanos en mayúsculas, y start es el numero o valor donde comenzara nuestra lista.
Para
poner una imagen de fondo con HTML es necesario agregar el atributo background al tag<body> y hacer referencia a una imagen,
tal como se describe en el
siguiente ejemplo:
<html>
<body background="fondo.jpg">
<body background="fondo.jpg">
<h3>Ejemplo
de imagen de fondo</h3>
<p>Se
pueden utilizar archivos en formato jpg, gif o png. No es recomendable usar
otro formato.</p>
<p>Si
la imagen es más pequeña que la página, se repetirá en mozaico. .</p>
</body>
</html>
</html>
Ejemplo de Cómo colocar imágenes con HTML
Una de las primeras cosas que debemos aprender del HTML es la etiqueta <img> que funciona para colocar imágenes dentro de una página web.
Una de las primeras cosas que debemos aprender del HTML es la etiqueta <img> que funciona para colocar imágenes dentro de una página web.
Para
poner una imágen utilizamos el siguiente código:
<imgsrc="imagenHTML.jpg">
Donde
"imagenHTML.jpg" es la imagen que vamos a colocar. Deberá estar
ubicada en el mismo directorio. Si queremos colocar una imagen con HTML en una
página que no está colocada dentro del mismo directorio, podemos usar una ruta
absoluta:
<imgsrc="folder/imagenHTML.jpg"
La
etiqueta <img> tiene varias propiedades como son:
border, width, height, alt
Ejemplo
con propiedades de imágen en HTML
<imgsrc="imagenHTML.jpg"
border="0" width="10" height="10">
El
ancho y alto (width, height) se coloca en pixeles y deben corresponder al
tamaño original de la imagen para que no se distorsione.
Los
formatos soportados por el navegador son jpg, gif y png.
Tabla
Las
tablas son la manera más sencilla de organizar el contenido en una página web.
Nos permiten delimitar de qué lugar a qué lugar deseamos que se muestre el
contenido.
Desde
mis inicios como diseñador web, me he dado a la tarea en especializarme en el
manejo de tablas y siempre las uso, y por supuesto que a mis alumnos les exijo
el uso de tablas y les pongo ejercicios muy complicados.
La
estructura básica consta de celdas y columnas, como si fuera una hoja de
cálculo. Sin embargo, se pueden llegar a combinar filas o columnas. Para este
ejemplo de tabla con html utilizaremos la estructura básica:
Ejemplo
de tabla en HTML
<table>
<tr>
<td>Celda</td>
<td>Celda</td>
</tr>
<tr>
<td>Celda</td>
<td>Celda</td>
</tr>
</table>
<tr>
<td>Celda</td>
<td>Celda</td>
</tr>
<tr>
<td>Celda</td>
<td>Celda</td>
</tr>
</table>
La
etiqueta <tr> sirve para cambiar de renglón.
La etiqueta <td> sirve para crear una nueva celda.
La etiqueta <td> sirve para crear una nueva celda.
Todas
las propiedades del HTML aplican a la etiqueta <table>
EJEMPLO DE MARQUESINA HTML
La
etiqueta <marquee> nos permite generar un texto o imágenes en
movimiento, es muy útil para banners rotatorios o resaltar un mensaje dentro de
nuestro sitio y así llamar la atención de los visitantes para comunicarles
alguna noticia importante, con el siguiente código se logra ese objetivo:
<marqueewidth="50%" scrolldelay="0">
Ejemplo de marquesina HTML
</marquee>
Donde scrolldelay es el valor de milisegundos que tardara en volver a pasar el texto o imagen.
URL del artículo: http://www.ejemplode.com/17-html/30-ejemplo_de_marquesina_html.html
Leer completo: ejemplos de Marquesina HTML
<marqueewidth="50%" scrolldelay="0">
Ejemplo de marquesina HTML
</marquee>
Donde scrolldelay es el valor de milisegundos que tardara en volver a pasar el texto o imagen.
URL del artículo: http://www.ejemplode.com/17-html/30-ejemplo_de_marquesina_html.html
Leer completo: ejemplos de Marquesina HTML
Las
tablas son la manera más sencilla de organizar el contenido en una página web.
Nos permiten delimitar de qué lugar a qué lugar deseamos que se muestre el
contenido.
Desde
mis inicios como diseñador web, me he dado a la tarea en especializarme en el
manejo de tablas y siempre las uso, y por supuesto que a mis alumnos les exijo
el uso de tablas y les pongo ejercicios muy complicados.
La
estructura básica consta de celdas y columnas, como si fuera una hoja de
cálculo. Sin embargo, se pueden llegar a combinar filas o columnas. Para este
ejemplo de tabla con html utilizaremos la estructura básica:
Ejemplo
de tabla en HTML
<table>
<tr>
<td>Celda</td>
<td>Celda</td>
</tr>
<tr>
<td>Celda</td>
<td>Celda</td>
</tr>
</table>
<tr>
<td>Celda</td>
<td>Celda</td>
</tr>
<tr>
<td>Celda</td>
<td>Celda</td>
</tr>
</table>
La
etiqueta <tr> sirve para cambiar de renglón.
La etiqueta <td> sirve para crear una nueva celda.
La etiqueta <td> sirve para crear una nueva celda.
Todas
las propiedades del HTML aplican a la etiqueta <table>
Cómo colocar imágenes con HTML
Una
de las primeras cosas que debemos aprender del HTML es la etiqueta <img>
que funciona para colocar imágenes dentro de una página web.
Para
poner una imágen utilizamos el siguiente código:
<imgsrc="imagenHTML.jpg">
Donde
"imagenHTML.jpg" es la imagen que vamos a colocar. Deberá estar
ubicada en el mismo directorio. Si queremos colocar una imagen con HTML en una
página que no está colocada dentro del mismo directorio, podemos usar una ruta
absoluta:
<imgsrc="folder/imagenHTML.jpg"
La
etiqueta <img> tiene varias propiedas como son:
border, width, height, alt
Ejemplo
con propiedades de imágen en HTML
<imgsrc="imagenHTML.jpg"
border="0" width="10" height="10">
El
ancho y alto (width, height) se coloca en pixeles y deben corresponder al
tamaño original de la imagen para que no se distorcione.
Los
formatos soportados por el explorer son jpg, gif y png.
Abrir
nuevas ventanas o instancias es muy sencillo con html. Para ello sólo debes
agregar el atributo "_blank" a un ancla.
Aquí
les dejo el ejemplo para abrir nuevas ventanas con HTML.
<html>
<body>
<body>
<a
href="http://www.ejemplode.com"
target="_blank">Ejemplode</a>
<p>
Este atributo es el causante de que se abra la nueva ventana: target="_blank">
</p>
Este atributo es el causante de que se abra la nueva ventana: target="_blank">
</p>
</body>
</html>
</html>
Como Alinear un
texto con clases
Las
hojas de estilo nos permiten alinear a la izquierda, derecha, centrar y
justificar un texto.
Realizar el siguiente Ejemplo:
<html>
Realizar el siguiente Ejemplo:
<html>
<head>
<styletype="text/css">
h1
{text-align: center}
h2
{text-align: left}
h3 {text-align:
right}
h4
{text-align: justify}
</style>
</head>
<body>
<h1>Cómo centrar un texto</h1>
<h2>Cómo alinear a la izquierda un
texto</h2>
<h3>Cómo alinear a la derecha un
texto</h3>
<h4>Cómo justificar un
texto</h3>
<h1>Cómo centrar otro texto de
tema</h1>
</body>
</html>
Ejemplo de pagina Web utilizando Referencias para vincular una página
web con otra.
Debes crer la siguiente paginaHTML la cual
nos permitirá vincular otras paginas web con direcciones absolutas y relativas,
utilizando la etiqueta <a href="">Vinculo a Mostrar</a>
<html>
<head>
<title>Floramics. Amigos de las
flores</title>
</head>
<body<!--
background=imagenes/flor.jpg -->>
<center><h1>Bienvenido a
Floramics</h1>
<h2>Presentación</h2>
<p> En esta web encontraras
informacion sobre la
asociación y nuestra colección de
fotografias de
flores.<br><br><br>
Tenemos las fotografías organizadas en
diferentes categorias.</p>
<imgsrc="imagenes/flor.jpg"
border=0 alt="No se encuentra esta imagen" />
<h2>Contacto</h2>
<p> Si quieres comunicarte con
nosotros
visita nuestra página de contacto.
Te esperamos.</p>
<br>
Vincular pagina web.
<ahref="http://www.aulaclic.es">aqui</a>.
<br><br>
Fuente: ejemplos de Liga a Email<br>
<a
href="mailto:jimmy.rodriguez@gmail.com">Mandanos un mail</a>
<br>
Vincular pagina web propia.
<a
href="prueba.html">aqui</a>.
</center>
</body>
</html>
Formatos de tabla en html
Te
has preguntado alguna vez como hacer una forma en HTML bien alineada y
ordenada. Pues aquí la respuesta y es muy simple utilizando tablas.
Las tablas permiten alinear en columnas separadas los campos y las etiquetas, sin más preambulos les dejo el código para Ejemplo de Forma en HTML:
Las tablas permiten alinear en columnas separadas los campos y las etiquetas, sin más preambulos les dejo el código para Ejemplo de Forma en HTML:
<form
name="form1" method="post" action="envio.php">
<table border="0" align="center">
<tr>
<td height="26"><div align="right" class="style6"><strong>Nombre> </strong></div>
<div align="center" class="style1"></div></td>
<td width="240"><input name="nombre" type="text" id=" nombre" size="20">
</td>
</tr>
<tr>
<td><div align="right" class="style6"><strong>Compañia></strong></div>
<div align="center" class="style1"></div></td>
<td><input name="empresa" type="text" id="empresa" size="20">
</td>
</tr>
<tr>
<td><div align="right" class="style6"><strong>E-mail > </strong></div>
<div align="center" class="style1"></div></td>
<td><input name="email" type="text" id="email" size="20">
</td>
</tr>
<tr>
<td><div align="right" class="style6"><strong>Comentario> </strong></div>
<div align="center" class="style1"></div></td>
<td><textarea name="comentario" cols="25" wrap="VIRTUAL" id="comentario"></textarea>
</td>
</tr>
<tr>
<td> </td>
<td><div align="center">
<input type="submit" value="Enviar">
</div></td>
</tr>
</table>
</form>
<table border="0" align="center">
<tr>
<td height="26"><div align="right" class="style6"><strong>Nombre> </strong></div>
<div align="center" class="style1"></div></td>
<td width="240"><input name="nombre" type="text" id=" nombre" size="20">
</td>
</tr>
<tr>
<td><div align="right" class="style6"><strong>Compañia></strong></div>
<div align="center" class="style1"></div></td>
<td><input name="empresa" type="text" id="empresa" size="20">
</td>
</tr>
<tr>
<td><div align="right" class="style6"><strong>E-mail > </strong></div>
<div align="center" class="style1"></div></td>
<td><input name="email" type="text" id="email" size="20">
</td>
</tr>
<tr>
<td><div align="right" class="style6"><strong>Comentario> </strong></div>
<div align="center" class="style1"></div></td>
<td><textarea name="comentario" cols="25" wrap="VIRTUAL" id="comentario"></textarea>
</td>
</tr>
<tr>
<td> </td>
<td><div align="center">
<input type="submit" value="Enviar">
</div></td>
</tr>
</table>
</form>
1.-
¿Qué es un frameset?
Un
frameset, conocido en español como conjunto de marcos, es un archivo que sirve
para dividir la página en varias ventanas cuadradas debido a que manda a llamar
varios archivos html independientes entre sí nombrados frames (marcos).
La
ventaja de los frames es que una sección de la página queda constante y no se
tiene que cargar cuando se llama a una liga, por lo tanto es ideal para colocar
navegadores.
La
desventaja es que ocupa un espacio de la página y no se puede quitar.
2.-
El tag<frameset>
Se
utiliza para definir como dividir la página en frames.
El
frameset se define con una cantidad de filas y/o columnas (rows, columns)
3.-
El tag<frame>
Define
los documentos html a llamar por cada frame.
Ejemplo
de frameset:
<framesetcols="100,*">
<framesrc="frame1.htm" name="izquierdo" scrolling="NO" noresize>
<framesrc="frame2.htm"name="principal" scrolling="AUTO" noresize>
</frameset>
<framesetcols="100,*">
<framesrc="frame1.htm" name="izquierdo" scrolling="NO" noresize>
<framesrc="frame2.htm"name="principal" scrolling="AUTO" noresize>
</frameset>
Creamos
un frameset horizontal que ocupa 100 pixeles de izquierda a derecha de nuestra
pantalla. El otro frame ocupa el % restante. De tal forma que nuestro frame
principal estará siempre fijo sin importar la resolución o el tamaño de la
ventana del navegador
4.-
Propiedades del <frameset>
<framesetcols="100,*"
frameborder="YES" border="1" framespacing="0"
bordercolor="#000033">
frameborder = Define si queremos un borde en nuestro frame
(YES, NO)
border = El ancho del borde, si frameborder es igual a YES
framespacing = El espacio que deja en el borde del frame
bordercolor = El color del borde
border = El ancho del borde, si frameborder es igual a YES
framespacing = El espacio que deja en el borde del frame
bordercolor = El color del borde
5.-
Propiedades del <frame>
src = El archivo html, asp, php que vamos a llamar.
name = El nombre de la venta que nos servirá de referencia para enviar parámetros con html o JavaScript.
name = El nombre de la venta que nos servirá de referencia para enviar parámetros con html o JavaScript.
scrolling = Si deseamos que salga la barra de scroll (YES,
NO, AUTO) *** Auto es igual a automático, lo calcula el navegador por nosotros.
noresize = Si queremos que el frame no pueda cambiar de tamaño al mover con el mouse
noresize = Si queremos que el frame no pueda cambiar de tamaño al mover con el mouse
6.-
Cómo crear una liga
Una
pregunta recurrente es:
***Cuándo creo un botón me abre la ventana en la misma ventana que mi botón***
***Cuándo creo un botón me abre la ventana en la misma ventana que mi botón***
Esto
es muy simple sólo se le debe de decir al botón que ventana utilizar cuando se
navega, quedando así.
<a
href="frame5" target="principal">
Donde
principal es la ventana más grande donde desplegamos el contenido.
Si
sólo usamos 2 frames se puede utilizar este tag después del body para eliminar
el target de nuestro a href.
<body>
<base target="principal">
</body>
<base target="principal">
</body>
Ejemplo de Frameset y frames:
home.html
<html>
<head>
<title>Ejemplo</title>
</head>
<head>
<title>Ejemplo</title>
</head>
<frameset cols="100,*"
framespacing="1" frameborder="yes" border="1"
bordercolor="#000033">
<frame src="frame1" name="izquierdo" scrolling="NO" noresize>
<frame src="frame2" name="principal">
</frameset>
<noframes><body>
<frame src="frame1" name="izquierdo" scrolling="NO" noresize>
<frame src="frame2" name="principal">
</frameset>
<noframes><body>
</body></noframes>
</html>
</html>
izquierdo.html
<html>
<head>
</head>
<body>
Frame Izquierdo
<a href="http://www.yahoo.com" target="principal">Yahoo</a>
</body>
</html>
<head>
</head>
<body>
Frame Izquierdo
<a href="http://www.yahoo.com" target="principal">Yahoo</a>
</body>
</html>
principal.html
<html>
<head>
</head>
<body>
Frame Principal
</body>
</html>
<head>
</head>
<body>
Frame Principal
</body>
</html>
7.- Tipos de target
Como
hemos visto, se puede utilizar como target un nombre que le hemos dado a un
frame, sin embargo, existen otros tipos de target que menciono a continuación.
target="_top"
target="_blank"
target="_self"
target="_parent"
target="_blank"
target="_self"
target="_parent"
_top = quita los marcos
_blank = abre una nueva ventana
_self = pone el documento en la misma ventana (funciona igual si no pones target)
_parent = abre la liga en el frameset padre (si no se tiene un padre, funciona como _top)
8.-
Etiquetas para navegadores que no soportan frames
Para
los navegadores que no soportan frames se pueden utilizar las etiquetas
<noframes> para poner contenido en dicho caso. (esto no afecta a los
navegadores que si soportan frames, que son los más usados)
<noframes>
<body>
</body>
</noframes>
<body>
</body>
</noframes>
No hay comentarios:
Publicar un comentario