Html

Cómo?
En la lección 1 vimos qué se necesita para crear un sitio web: un
navegador y el Bloc de notas (o un editor de texto similar). Puesto que
estás leyendo esto, lo más probable es que ya tengas abierto el
navegador. Lo único que necesitas es abrir otra ventana del
navegador de forma que puedas leer este tutorial y veas cómo va
quedando tu nuevo sitio web al mismo tiempo.
Abre también el Bloc de notas (que se encuentra en el menú de
Inicio, Todos los programas, en la sección Accesorios):

Empecemos con algo sencillo. Que te parece una página que diga: "¡Hurra! Esta es mi
primera página web." Sigue leyendo y verás qué sencillo es.
HTML is sencillo y lógico. El navegador lee el código HTML igual que lo haces tú: de
arriba abajo y de izquierda a derecha. Así pues, todo documento HTML empieza con lo
que debería aparecer en primer lugar en la página y termina con lo que debería ir en último
lugar.
Lo primero que tienes que hacer es decirle al navegador que le "hablarás" usando el
lenguaje HTML. Esto se consigue con la etiqueta <html> (sin sorpresas, ¿no?). Así que
antes de hacer cualquier otra cosa, escribe "<html>" en la primera línea del documento
creado con el Bloc de notas.
Como recordarás de las lecciones anteriores, <html> es una etiqueta de inicio y tiene que
cerrarse con su correspondiente etiqueta de cierre cuando hayas terminado de escribir el
código HTML. Así que para no olvidar la etiqueta de cierre del elemento HTML escribe
"</html>" un par de líneas más abajo, y entre ambas etiquetas <html> y </html> escribe el
resto del documento.
Lo siguiente que necesita el documento es una "cabecera", que proporcionará información
relativa a este mismo documento, y un "cuerpo" donde se incluirá el contenido del
documento. Puesto que HTML es de lo más lógico, la cabecera (es decir, las etiquetas
<head> y </head>) se encuentra encima del cuerpo (o sea, encima de las etiquetas <body>
y </body>).
El documento debería presentar ahora este aspecto:
Y qué puedo hacer?

<html>
<head>
<title>Practica1
</title>
</head>
<body bgcolor="#FFC0CB">
<h1 bgcolor="#C71585">mi primer
ejemplo</h1>
<img src="imagen.JPG">
</body>
</html>
<ol> <li>Primer elemento de lista</li>
<li>Segundo elemento de lista</li>
</ol>

#RRVVAA COLOR
#RRVV
AA
COLO
R
#FFFFFF Blanco
#00000
0
Negro
#FF0000 Rojo
#00FF0
0
Verde
#0000FF Azul
#FF00F
F
Magen
te
#00FFFF Cyan
#FFFF0
0
Amarill
o
#70DB93 Agua Marino
#00008
0
Azul
Marino
#FF7F00 Coral
#A62A
2A
Café
#C0C0C0 Plomo
#4F2F4
F
Violeta

Bgcolor Define el color de fondo de la página
Text Define el color del texto de la página
Link Define el color de los vínculos en la página
Alink Define el color del vínculo actual o activado en la página
Vlink Define el color del vínculo ya visitado
Background
Bgsound
Bgproperties
Define el archivo gráfico que será desplegado como fondo
Define el archivo de audio que se tocará en la página.
Define el movimiento vertical del fondo.

DISEÑO DE UNA PÁGINA WEB
Antes de entrar de lleno en lo que será la construcción de la página
web, desarrollaremos la metodología para el diseño de las mismas. Es
importante ser originales para estructurar sus contenidos, redactar sus
textos, agregar imágenes, enlazar las páginas, etc,
1. ELEGIR POSIBLES TEMAS A TRATAR EN LA PÁGINA WEB
Empieza haciéndote esta pregunta
¿De qué puedo hablar en mi página web?
¿Cuál es la temática que voy a trabajar?
Para contestar estas preguntas haremos un listado de posibles
temáticas que te puedan interesar para realizar la página web.
Más adelante iremos eliminando y añadiendo otras según los
factores que vamos a tener en cuenta y según cuál sea tu objetivo:
ganar muchas visitas, ganar mucho dinero, o cualquiera que sea el
fin de tu página web.

2.- Escoge un tema para tu página web
El factor más importante, es, que el tema nos apasione. De modo
que de la lista de temas que tengo, voy a ordenarlos Según me
gusten. (El tema que quede primero es sobre el que desarrollar
4.- Definición de la Información a publicar.
Después de que hayas seleccionado el tema de la página web es
necesario definir la información que se va a publicar en el sitio
Web
5.- ¿Qué fuentes de información tengo?
Una fuente de información es el lugar del que manan los
conceptos, las ideas y los pensamientos que sirven para la
creación de nuevo conocimiento en este caso una página web.
Por lo tanto, en este apartado necesitamos recolectar las fuentes
de información de donde vamos a extraer información del tema
de nuestra página web

6.- Escalabilidad
La escalabilidad se define como las visiones a corto y largo plazo acerca de
nuestro sitio Web, si a largo tiempo queremos ampliar nuestro sitio Web con
nuevas aplicaciones, nuevas páginas, actualizaciones constantes de que va a
depender que realicemos esto:}
7.- Planificación
En todo proceso de creación y diseño de páginas Web el primer paso a llevar a
cabo será la planificación, que incluye la definición de:
OBJETIVOS: Presentar información de la preparatoria que sea atractiva para los
jóvenes de nuevo ingreso.
a) PÚBLICO: identificar el tipo de personas a la que va dirigida la información,
en este caso todo tipo de personas podrán acceder a la página pero el
público seleccionado será los estudiantes de secundaria y todos aquellos
jóvenes que estén buscando educación del nivel medio superior.
b) CONTENIDO: habrá información sobre el plantel y la preparación que otorga
a los jóvenes.
c) ESTRUCTURA: Estará formada por una página principal que brindara
información y ofrecerá enlaces para ir las secciones del sitio web: materias,
capacitaciones, Paraescolares, etc. Tendrá otras 3 páginas web más que
estarán ligadas a la primera como se muestra en la estructura siguientes:

8.- Definición del diseño
Dependiendo del tipo de Web, el tema seleccionado, definida la
información y la escalabilidad, estamos preparados para plasmar
en papel el diseño de la página Web, incluyendo las páginas, los
fondos, tipos de letras, botones, formularios, links, plantillas,
aplicaciones.... de tal forma que obtengamos "storyboard" (es un
conjunto de ilustraciones mostradas con el objetivo de servir de
guía para entender una historia, pre visualizar una animación o
seguir la estructura de una página web antes de realizarse) de
los elementos y diseño que queremos implementar en nuestro
sitio Web.

Manejar los elementos básicos del lenguaje HTML en la creación de páginas web
ACTIVIDAD 5
Antes de empezar a crear la página web es necesario que conozcas los términos básicos
que estarás utilizando en el transcurso de este bloque, por lo que es necesario que realices
una búsqueda en Internet y definas lo siguiente:
Bloc de Notas:
__________________________________________
Buscador:
___________________________________________________________
____________________________________________________
Compatible: ___________________________________________
Estructura de página web:
__________________________________________
Etiqueta:
____________________________________
Hipertexto:
__________________________________________
Lenguaje html:
__________________________________________
Marcas (tag)
__________________________________________
Navegador:
_________________________________________
Página web:
__________________________________________
Plataforma:
___________________________________________
Servidor web:
___________________________________________
Vínculos

ESTRUCTURA BÁSICA
Cada página comienza con: < HTML > .
A continuación viene la cabecera, delimitada por < HEAD > < /HEAD >
Después, el comando < BODY >, que indica el comienzo del cuerpo de la
página.
Las instrucciones HTML se escribirán a continuación, y finalizarán con
< /BODY >
La página acabará con < /HTML >
<body style="background-color:#ff0000;"> fondo de la pagina
<h2 style="background-color:#ff0000;">Mi amistad con HTML</h2>
<img src="imagen.JPG">
<embed src="El Perdon.mp3" volume="80" loop=infinite
weidth="400" height="40" autostart="true">
<a href="pagina2.html">Haz clic para ir a la página 2</a>
<a href="pagina3.html">Haz clic para ir a la página 2</a>

EJEMPLOS: CCLASIFICACIÓN
Lenguaje HTML Sitio Web profesional
Capacitación de
Informática
Sitio Web profesional
Mi artista favorito Sitio Web de ocio
Portafolio de evidencias
de mis materias
Sitio web de información
Negocio familiar Sitio Web comercial
Mi ciudad Sitio web de información
Mi escuela Sitio web de información

FRAMES
 El primer paso será crear el documento
de definición de frames. Abrimos nuestro
editor y creamos un nuevo archivo. En
este caso lo llamaremos index.htm y
escribimos en él el siguiente código:

 Con esto tendremos una página que dividirá la ventana del
navegador en una columna izquierda y otra derecha que
ocupan el 20% y el 80% del ancho respectivamente. El contenido
de cada una de estas columnas estará en los archivos
izquierda.htm y derecha.htm
<HTML>
<HEAD>
<TITLE>
Primera página con frames
</TITLE>
</HEAD>
<FRAMESET COLS="20%,80%">
<FRAME SRC="izquierdo.html">
<FRAME SRC="derecho.html">
</FRAMESET>
</HTML>
FRAMES

Atributos de la etiqueta FRAME
SCROLLING: Usando este atributo podemos controlar la aparición o no de
barras de desplazamiento. Los valores que puede tomar este atributo son:
 SCROLLING="auto": Este es el valor por defecto y provoca que el
navegador sólo inserte barras de desplazamiento si el contenido del
frame ocupa más del espacio dedicado para él.
 SCROLLING="yes": Las barras de desplazamiento aparecerán siempre.
 SCROLLING="no": Las barras de desplazamiento no aparecerán
nunca. Hay que tener mucho cuidado si usamos esta opción porque
si la página ocupa más que el espacio de la ventana dedicado al
frame la información que no quepa en un principio no podrá ser vista.
 NORESIZE: Por defecto los usuarios pueden mover los bordes de los
frames sin más que situar el ratón sobre ellos y arrastrarlos. Si incluimos
este atributo en la etiqueta FRAME evitaremos que el borde de ese
frame pueda ser movido. Es necesario notar que este atributo no toma
ningún valor.
 MARGINHEIGHT: Ajusta el margen superior que debe respetar el
contenido de ese frame. El tamaño debe ser dado en pixeles.
 MARGINWIDTH: Ajusta el margen lateral que debe respetar el contenido
del frame. Al igual que antes, el margen debe ser dado en pixeles.
Para terminar vamos a ver un ejemplo del uso de todos ellos:

<FRAMESET COLS="110,*" ROWS="110,*">
<FRAME NAME="Imagen"
SRC="cuadrado.gif"
MARGINWIDTH="0"
MARGINHEIGHT="0"
SCROLLING="No"
FRAMEBORDER="No"
<FRAME SRC="f2.htm"
<FRAME SRC="rect.gif" SCROLLING="no">
<FRAME SRC="f4.htm"
MARGINWIDTH="100"
MARGINHEIGHT="100"
</FRAMESET>
FRAMES
Ejemplo 2

 Cambiando el color del borde
<FRAME BORDERCOLOR="red">
<FRAME BORDERCOLOR="#FF0000">
Como quitar el borde
<FRAME FRAMEBORDER="0">
<FRAMESET COLS="150,*">
<FRAME SRC="frame1.htm" FRAMEBORDER="0">
<FRAMESET ROWS="100,*">
</FRAMESET>
</FRAMESET>
FRAMES

<FRAMESET COLS="150,*">
<FRAME SRC="frame1.htm">
<FRAMESET ROWS="100,*" BORDER="20">
</FRAMESET>
</FRAMESET>
FRAMES

TABLAS
<table border="1">
<tbody>
<tr>
<th>Cabereca 1</th>
<th>Cabereca 2</th>
<th>Cabereca 3</th>
</tr>
<tr>
<td>Dato 1</td>
<td>Dato 2</td>
<td>Dato 3</td>
</tr>
<tr>
<td>Dato 4</td>
<td>Dato 5</td>
<td>Dato 6</td>
</tr>
</tbody>
</table>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title></title>
</head>
<body>
<h1>Tablas básicas</h1>
<table border="1">
<tbody>
<tr>
<th>Cabereca 1</th>
<th>Cabereca 2</th>
<th>Cabereca 3</th>
</tr>
<tr>
<td>Dato 1</td>
<td>Dato 2</td>
<td>Dato 3</td>
</tr>
<tr>
<td>Dato 4</td>
<td>Dato 5</td>
<td>Dato 6</td>
</tr>
</tbody>
</table>
<br>
</body>
</html>

EJEMPLO
Vamos a realizar una tabla de dos filas
y dos columnas, con borde de tamaño
"1" y de largo el 50% del ancho de
página. Y le ponemos a una celda
fondo rojo con el atributo
bgcolor="red" y a otra fondo azul
<table border="1" cellpadding="0" cellspacing="0" width="50%">
<tr>
<td width="50%" bgcolor="red"></td>
<td width="50%" bgcolor="blue"></td>
</tr>
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
</table>
<font color="red">
<font face="Arial" color="orange" size=1>

width= Acompaña a <table> y especifica el ancho de la tabla, tanto en
número de pixeles como en porcentaje respecto al ancho de la pantalla.
También puede acompañar a las tags <th> o <td> para especificar el
ancho de las columnas.
Border= Anteriormente, ya hemos hablado de este atributo. Ahora le
diremos que puede darle un valor que indicará el ancho del borde en
pixeles. Border="0" indicaría la ausencia de borde.
Cellspacing= Suele acompañar a la tag <table>. Indica el número de
pixeles que separan cada celda. El valor predeterminado suele ser 2.
Cellpadding= También acompaña a la tag <table>. Indica el espacio en
pixeles entre el borde de la celda y su contenido. El valor
predeterminado suele ser 1.
<BODY>
<H1>Tablas avanzadas</H1>
<TABLE WIDTH="50%" BORDER="1" CELLSPACING="3" CELLPADDING="2">
<TR>
<TD COLSPAN="2" ALIGN="right">Dato 1</TD>
<TD>Un texto cualquiera</TD>
<TD ROWSPAN="2">Dato 3</TD>
</TR>
<TR>
<TD>Dato 4</TD>
<TD>Dato 4</TD>
<TD ALIGN="center">Dato 5</TD>
</TR>
</TABLE>

src= Este atributo es obligatorio e indica el nombre del archivo de imagen (entre comillas) o
la URL que se va a representar.
Align= Permite controlar la alineación de una imagen con respecto a una línea de texto
adyacente o a otras imágenes en esa línea. Los tres valores posibles son los ya conocidos
left, right, top, middle y bottom.
Alt= Es la alternativa que se estableció cuando todavía existían visualizadores de solo texto.
Entre comillas podremos escribir un texto que suplantara a esta imagen si no se carga o
mientras se carga o cuando, visualizando ya la imagen, pasamos el ratón por encima.
WIDTH= Este atributo es opcional pero es recomendable ponerlo para ayudar al navegador
a representar la imagen, significa el ancho de la imagen que vamos a representar.
HEIGHT=Al igual que el atributo WIDTH, es opcional y recomendable ponerlo, este significa el
alto de la imagen.
BORDER= Con BORDER especificamos el ancho de un borde que rodea la imagen.
<IMG SRC="/graficos/bebe1.jpg" WIDTH=140 HEIGHT=210 BORDER=0 ALT="Un bebé">
<HEAD>
<TITLE>Ejemplo 12</TITLE>
</HEAD>
<BODY>
<H1>Imágenes</H1>
<IMG SRC="/graficos/bebe1.jpg" WIDTH=140 HEIGHT=210
BORDER=0 ALT="Un bebé" ALIGN="RIGHT">
<IMG SRC="/graficos/bebe1.jpg" WIDTH=140 HEIGHT=210
BORDER=3 ALT="Un bebé" ALIGN="LEFT">
Un texto cualquiera.
</BODY>

Html

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (13)

Destacado

Destacado (7)

Similar a Html

Similar a Html (20)

Último

Último (20)

Html