Apuntes informatica html
Anuncio
Títulos:
6 diferentes ; <H1> …… </H1> ; <H2>…….</H2> ; …..
<hr color=”color”>; Para poner una linea en la página.
Párrafos:
<p>……</p>
Situar un párrafo en el centro o los lados: align=”center,right,left”
Separar partes con una línea: <hr color=”color” >
Listar elementos:
Con puntos: <ul> <li>…… </li> <li>…..</il> </ul>
1. Con números: <ol> <li>…… </li> <li>…..</il> </ol>
Tipos de letra:
Negrita: <b>….. </b>
Cursiva (italic): <i>…… </i>
Subrayado (underline): <u>…… </u>
Superíndice: <sup>….. </sup>
Subíndice: <sub>….. </sub>
Etiqueta clave: <font>……. </font>
Teletipo: <tt>……. </tt>
Aumento de tamaño: <big>…..</big>
Disminución de tamaño: <small>…..</small>
Remarcar: <strong>…..</strong>
Modificadores de esta etiqueta:
Color: color=”Color seleccionado”
Tamaño: size=”Numero de pixeles (20px)”
Fuente: face=”Nombre de la fuente”
Etiqueta para el salto de línea: <br>
Etiqueta para hacer espacios (sangrar un párrafo):
<blockquote>…… </blockquote>
Imágenes:
<img src=”sitio de la imagen” width (ancho)=”porcentaje o tamaño en
pixeles” height (altura)=”tamaño en pixeles” title=”titulo”
border=”tamaño en pixeles” >
Para centrar los elementos: <center>……. </center>
Hipervínculos:
<a href=”página web”>…….</a>
<a name=”nombre de la zona de página”> dejarlo vacio </a>
<a href=”#nombre de la zona de página”> Ir a la zona de página anterior
</a>
“Body”:
<body bgcolor=”color de fondo” link=”color del link” vlink=”color de link
visitado” alink=”color de link activo”>…….</body>
Tablas:
Manda lo particular sobre lo general.
Situar un párrafo dentro de una celda en el sitio deseado verticalmente:
valign=”top,middle,bottom”
<table border=”tamaño del borde en pixeles” bgcolor=”color deseado”
bordercolor="color del borde" align="sitio deseado horizontalmente"
cellpadding=”modifica el margen interior de las celdas”
cellspacing=”modifica el espacio entre las celdas” >
<tr bgcolor=”color deseado”>
<td bgcolor=”color deseado” valign=”sitio deseado verticalmente”
colspan=”número de celdas en horizontal que quiero que ocupe”
rowspan=”número de celdas en vertical que quiero que ocupe”>
Celda 1</td> <td> Celda 2</td> <td> Celda 3</td>
</tr>
<tr>
<td> Celda 4</td> <td> Celda 5</td> <td> Celda 6</td>
</tr>
<tr>
<td> Celda 7</td> <td> Celda 8</td> <td> Celda 9</td>
</tr>
</table>
Videos y sonidos:
<embed src=”ubicación del archivo” autostart=false volume="0"
loop=infinite>
Video de Youtube:
1.
2.
3.
4.
5.
Meterse en el video
Darle a compartir
Darle a insertar
Copiar el código
Corregir el enlace
Estilos.css:
< “X” class=”nombre cualquiera”>
</”X”>
.nombre cualquiera {atributo CSS}
Frames:
<frameset rows=numero cualquiera,*,2*,% >
<frame src="http://www.colegiosansaturio.com">
<frame src="http://www.elmundo.es" target=”nombre del frame”>
<frame src="http://www.marca.com">
</frameset>
<noframes>
<BODY BGCOLOR="red">
<h1> Lo sentimos, pero su navegador no soporta frames </h1>
</BODY>
</noframes>
</HTML>
Mapeo de imágenes:
<map name="comunidades">
<area shape="circle" coords="x, y, radio" href="página web">
<area shape="rect" coords="punta superior izq, punta inferior derecha"
href="página web ">
<area shape="poly" coords="puntos en el sentido de las agujas del reloj"
href="http://www.google.es">
</map>
<img usemap="#comunidades" src="imagenes/mapa.jpg" title="Pinche en
la provincia para obtener detalles">
Javascript:
<head>
<noscript>
<p> Por favor active Javascript en su navegador</p>
</noscript>
<script type=”text/javascript”>
Se escribe la function (“lo que se quiere hacer con esa función”);
alert ("Mi primer programa en Javascript");
</script>
</head>
<BODY>
<p onclick="alert('Jo, no sabes lo que ha pasao, Mencey Pelinor ha morido.
PUTA BIDA TT')">
Hola, ¿Quedamos para estudiar?
</p>
</BODY>
var numero_1=3;
var numero_2=5;
var resultado=numero_1+numero_2;
alert(resultado);
numero_1="Ahora la variable contiene texto";
alert(numero_1);
Evento
onblur
Descripción
Deseleccionar el elemento
Elementos para los que está
definido
<button>, <input>, <label>,
<select>, <textarea>, <body>
Deseleccionar un elemento que se ha
<input>, <select>, <textarea>
modificado
onclick
Pinchar y soltar el ratón
Todos los elementos
Pinchar dos veces seguidas con el
ondblclick
Todos los elementos
ratón
<button>, <input>, <label>,
onfocus
Seleccionar un elemento
<select>, <textarea>, <body>
onkeydown
Pulsar una tecla (sin soltar)
Elementos de formulario y <body>
onkeypress Pulsar una tecla
Elementos de formulario y <body>
onkeyup
Soltar una tecla pulsada
Elementos de formulario y <body>
La página se ha cargado
onload
<body>
completamente
onmousedown Pulsar (sin soltar) un botón del ratón Todos los elementos
onmousemove Mover el ratón
Todos los elementos
El ratón "sale" del elemento (pasa
onmouseout
Todos los elementos
por encima de otro elemento)
El ratón "entra" en el elemento (pasa
onmouseover
Todos los elementos
por encima del elemento)
onchange
Descripción
Evento
onmouseup
onreset
onresize
onselect
onsubmit
onunload
Soltar el botón que estaba pulsado en
el ratón
Inicializar el formulario (borrar
todos sus datos)
Se ha modificado el tamaño de la
ventana del navegador
Seleccionar un texto
Enviar el formulario
Se abandona la página (por ejemplo
al cerrar el navegador)
Elementos para los que está
definido
Todos los elementos
<form>
<body>
<input>, <textarea>
<form>
<body>
Sintaxis de javascript:
No se tiene en cuenta los espacios en blanco y las nuevas líneas.
Se distinguen mayúsculas de minúsculas.
No se define el tipo de las variables.
//comentario de una linea
/*comentario de
varias lineas*/
No es necesario terminar con ; pero sí muy recomendable
Normas para identificadores de variable:
1º carácter no puede ser un número.
letras números y símbolos $ y _ .
No sea una palabra reservada.
-Variable numércia:
var entero=1;
var decimal=1;
-Cadenas de texto:
var texto=”Ferguson, \t\t alias \”diente \n largo\” se acercó
lentamente.”
-Tipo arrays:
var diasemana=prompt("Introduce un día de la semana \n del 0 al
6","","")
var
dias=["Domingo","Lunes","Martes","Miércoles","Jueves","Viernes","
Sábado"];
alert("El día de la
"+dias[diasemana]+".");
semana
nº
"+diasemana+"
Ejercicio resuelto:
var apellido1=prompt("Introduce tu apellido","","");
var apellido2=prompt("Introduce tu segundo apellido","","");
var nombre=prompt("Introduce tu nombre","","");
alert(nombre+" "+apellido1+" "+apellido2)
IMP: ¡Comentar el programa!
Variables bureanas:
alert(4>=4); Mayor o igual
alert(4<=4); Menor o igual
alert(4>4); Mayor
alert(4<4); Menor
alert(4==4); Igual
alert(4!=4); Distinto
Condicional:
var numero=prompt("Introduzca un número por favor","1")
es
el
if (numero<5)
{
alert("Oye, ¿Sabías que el número "+numero+" es menor que 5?")
}
else
{
if (numero==5)
{
alert("Oye, ¿Sabías que el número "+numero+" es igual que
5?")
}
else
{
if (numero>5)
{
alert("Oye, ¿Sabías que el número "+numero+" es
mayor que 5?")
}
else
{
alert("Introduce solo números para que funcione,
gracias")
}
}
}
Para abrir una ventana:
window.open("http://www.google.es")
Bucles:
for(t=0;t<=3;t++)
{
}
Funciones:
function cambiar_colores ()
{
alert ("Funciona");
}
cambiar_colores ();
Formularios:
<BODY BGCOLOR="#FFFFFF">
<form name="form">
<input type="text/radio/button" >
</form>
</BODY>
