Serkronyx
3/2/2016 - 4:12 PM
HTML
HTML
meta
Para usar caracteres en inglés se utiliza
<meta encoding = UTF-8 />
Para los caracteres en españos se utiliza para no tener problemas con los acentos y con la letra ñ
<meta encoding = ISO-8859-1 />
Redireccionamiento
<meta http-equiv = "refresh" content = "3";
url = http://www.didominio.com/mantenimiento.html />
Parrafos
Para los parrafos se utiliza
<p>Hola a Todos</p>
Salto de Linea
<br/>
Negritas
<b></b>
Italica
<i></i>
Subrayado
<ins></ins>
Texto Grande
<big></big>
Texto Enfatizado
<em></em>
Texto Pequeño
<small></small>
Texto Fuerte
<strong></strong>
Texto Tachado
<del></del>
Superíndice (Supercript)
<sup></sup>
Subíndice (Sunscript)
<sub></sub>
Citas
<blockquote cite=URL>Nuestro Texto</blockquote>
Linea Horizontal
<hr/>
Lista No Numerada
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
</ul>
Lista Numerada
ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
</ol>
Listas de Definición
Definition List
<dl></dl>
Definition Team
<dt></dt>
Definition Description
<dd></dd>
Imagen
<img>
Atributos de Imagen
src Indica el origen de nuestra imagen
alt Texto alternativo que hace referencia a la imagen
border Indica si la imagen lleva borde o no
heigt Especifica el alto de la imagen
width Especifica el ancho de la imagen
Etiquetas
Para indicar que se trabajara con HTML5 se tiene que poner siempre al inicio el siguiente comando
<!DOCTYPE html>
Esto es para que utilice el "Standard Mode" que es el interprete de HTML5 de lo contrario utilizara "Quirk Mode" que es el interprete de HTML (versiones anteriores)
Para tener una estructura correcta se tiene que colocar "html" para la apertura y "/html" para el cierre Tambien se utiliza la etiqueta head y body detro de head se utiliza la etiqueta title que el nombre de nuestra pagina asi como tambien dento de meta que se utiliza para los metadatos que sirve para especificar informacion acerca de nuestra pagina
Ejemplo de Estructura
<!DOCTYPE html>
<htlm>
<head>
<title></title>
<meta encoding = "iso-8859-1" />
<body>
</body>
</head>
</html>
La etiqueta meta tiene la funcion de poner palabras claves dentro de la misma, para que cualquier buscador pueda encontrar nuestra pagina si metimos alguna de ellas
Ejemplo de meta
<head>
<meta name="KeyWords"
content ="mascota,cachorro,perro,gato" />
</head>
Así como condicionar el lenguaje utilizado dentro de la pagina o redireccionar al usuario a una nueva URL
<meta encoding = UTF-8 /> //idioma Inglés
<meta encoding = ISO-8859-1 /> //Idioma Español
<meta http-equiv = "refresh" content = "3"; //redireccionamiento
url = http://www.didominio.com/mantenimiento.html />
*Se utilizan diferentes etiquetas en HTML una de las más usadas son las de * apertura y cierre
Ejemplo de h2
<h2>Hola Mundo</h2>
*Y otras son las que no utilizan cierre que son conocidas como * simples o vacias
Ejemplo de img
<img src = "pelota.jpg">
como no tiene cierre implentan atributo y un atributo en una etiqueta indica propiedades o comportamiento que la etiqueta en cuestion debe tener, en el ejemplo anterior se utilizo la propiedad src que indica que la imagen que debe desplegarse corresponde al archivo pelota.jpg y no a cualquier otra
form
Etiqueta que contiene a todo el formulario
<from></form>
Atributos form
action Indica a donde envia los datos del formulario
metod Especifica la manera en que enviara los datos en el protocolo HTTP
fieldset
<fieldset>
Es una etiqueta que abre un recuadro rectangular y agrupa los botones segun sea tu eleccion (etiqueta con cierre)
lengend
<legend>
Coloca un texto que sirve como leyenda para fieldset o identificador de secciones y ayuda a organizar mejor el formulario (etiqueta con cierre)
lable
<lable>
Es el texto que va antes del boton
Atributos lable
for //el elemnto for tiene que ser igual al id de un elemto de formulario
Campos de Texto
input: Indica el tipo de campo o boton que deas utilizar siempre y cuando tenga tambien el atributo type
<input type ="tipo de campo"
id = "nombre cualquiera" //es un identificador
value = "mensaje"> //se le agrega un valor por default
Area de Texto
textarea Especifica el nuemero de lineas que desea que el area del texto pueda contener
<textarea id="ejemplo" rows="4" cols="60">
puede colocar texto
</textarea>
Password
password Este campo oculta informacion a la vista del usuario pero no encripta para esto necesitas utilizar otras herramientas
<input type = "password"
id = "ejemplo"
value = "Contraseña">
Lista de Selección Simple(combobox)
Esta opcion nos despliega una lista despleglable con las opciones que predefine el programador
Para poder utilizar esta lista necesitamos 2 elementos los cuales son las etiquetas select que nos ayuda a indicar las opciones o tipo de lista, asi como tambien necesita un identificador id y tambien necesitamos la etiqueta option que nos ayuda a incluir las opciones predefinidas por el programador y porteriormente necesitamos el identificador para cada opción value
<select name="mascota1">
<option>Perro</option>
<option>Gato</option>
<option>Roedor</option>
</select>
Lista de Selección Multiple(listbox)
Esta opción nos permite hacer mas de una seleccion es el mismo tiempo pero el procedimiento es el mismo que en el combobox la unica diferencia es que en el listbox agreramos un atributo que se llama multiple
<select name="Mascota3" size="2" multiple>
<option>Perro</option>
<option>Gato</option>
<option>Roedor</option>
</select>
Lista de Botonoes de Radio(radio buttons)
Este nos despliega un boton con forma de circulo el cual nos da una condicion ya que siempre tiene que estar selecciona una opcion y puedes meter la cantidad de botones que requieras para esto necesitamso la etiqueta input y el atributo type, un identificador id, un nombre name y todos los botones tiene que tener el mismo nombre para que pertenescan a la misma lista y value indica el valor de la opción y se usa la etiqueta lable for para indicar el nombre del boton
Lista de Botones Radio:
<input type = "radio"
id="perro"
name="tipo_mascota"
value = "1" />
<lable for="perro">Perro</lable>
<input type="radio"
id="gato"
name="tipo_mascota"
value="2" />
<lable for="gato">Gato</leable>
<input type="radio"
id="roedor"
name="tipo_mascota"
value="3" checked = "checked" />
<lable for="roedor">Roedor</lable>
Tenemos diferentes tipos de botones unos de los mas iportantes son los siguientes
Enviar Información(submit)
Este boton nos ayuda enviar la información que ayamos capturado en el formulario y su sintaxis es la siguiente:
<input type="submit"
id="envía"
value="Enviar Información" />
Borra el formulario(reset)
Este boton lo que hace es que manda regresa a el formulario a su estado original su sintaxis es la siguiente:
<input type="reset"
id="borrar"
value="Borrar Información" />
#Botón Simple(button)
Este es un boton que tiene caracteristicas diferentes al submit ya que solo envia la informacio especifica dependiendo que sea lo que se le programe dentro y su sintaxis es la siguiente:
<input type="button"
id="boton"
value="Botón" />
Tambien existe otra manera mas facil de hacer un boto por ejemplo:
<button type="button">
Botón
</button>
Botón de Imagen
Este botón lo que hace es hacer una imagen con la funicón de botón su sintaxis es la siguiente:
<input type="imge"
id="imagen"
src="orgiend de la imagen"
alt="texto altenativo"
Campo Oculto
Este botón no se muestra al usuario es solo una ayuda para el programador, su sintaxis es:
<input type="hidder"
id="oculto"
value="mensaje alternativo"
Audio
<audio> </audio>
Atributos de Audio
autolplay | indica si el audio deberia ser automatico
controls | indica si los controles del repoductor deberían ser visibles
preload | especifica si el audio debería ser cargado cuando la página empieza a cargar
**