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

**