Codigos HTML

Cuales son los codigos HTML, mas importantes y que debemos conocer?

 

Estructura del Codigo HTML:

La Estructura establecida en el codigo HTML para el diseño de pagina WEB, es la siguiente:

<html>
<head> Cabezera
<title>Aqui va el titulo de tu pagina Web/title>
</head>
<body>
Contenido de la pagina WEB, hipervinculos, demas codigos HTML.
</body>
</html>


Enlaces:

 

Para que el enlace esté en la misma pagina, es decir, cuando se haga “clic” en la palabra de enlace entonces  se pierda la pagina anterior, se debe colocar:

<a>palabra</a>

<a href=”ruta“>palabra</a>

La ruta es la direccion a la que queremos redirigir la pagina web.

Pero si lo que queremos es redirigir en una pagina nueva sin perder la pagina anterior, entonces se debe colocar el enlace de la siguiente forma:

<a href=”rutatarget=”_blank”>palabra</a>


  • Enlaces de Imagenes:
  • 

<a href=”ruta“><img src=”ruta” width=”88″ height=”31″ alt=”nombre” /><br />palabra</a>

<img alt=”Pulsa para escribirme un E-Mail!” src=”objetos/buzon.gif” height=”32px” width=”32px” />


  • Enlace de Correo:

<a href=”mailto:ing.telecomfranco@gmail.com“>correo de contacto</a>

 

Orden en el parrafo:


  • Texto en Negrita

<b>Texto remarcado</b>


  • Insertar Imagen

<img src=”ruta/imagen.gif” width=”XXpx” height=”YYpx” alt=”descripcion de la imagen“>


  • Introducir Parrafo

Para separar adecuadamente los parrafos debemos colocar el tags: <p></p>, de la siguiente forma:

<p>Parrafo1</p>

<p>Parrafo2</p>


  • Texto a la Izquierda

<p align=”left”>Texto alineado a la izquierda</p>

  • Texto al Centro

<p align=”center”>Texto alineado al centro</p>

  • Texto a la Derecha

<p align=”right”>Texto alineado a la derecha</p>

  • Texto Justificado

<p align=”justify”>Texto justificado</p>


  • Tamaño de los titulos

<h1>Encabezado de nivel 1</h1>
<h2>Encabezado de nivel 2</h2>
<h3>Encabezado de nivel 3</h3>
<h4>Encabezado de nivel 4</h4>
<h5>Encabezado de nivel 5</h5>
<h6>Encabezado de nivel 6</h6>

 

Hoja de Estilos


Las hojas de estilo en cascada (Cascading Style Sheets), CSS es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML. El World Wide Web Consortium es el encargado de formular la especificación de las Hojas de Estilo que servirán de estándar para los agentes de usuarios o navegadores.

La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación.

 

  • Agregar hoja de estilos a Pag. Web Index.html

<link rel=”stylesheet” href=”ruta/estilos.css” type=”text/css” media=”all”>

 

  • Color de pagina.css

body {background-color: #E6E6FA}

Codigo de Colores HTML

 

  • Imagen de fondo.css

body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) }


  • No se repite la imagen de fondo.css

body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; background-repeat: no-repeat }


  • Fondo Centrado.css

body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; background-repeat: no-repeat ; background-position: center center}


  • Configurar altura de fondo

body {background-color: #E6E6FA ; background-image: url(objetos/fondo.png) ; background-position: center center ; background-repeat: no-repeat ; height:100%; }


Lista de tags HTML:

Junto a cada tag encontrarás un símbolo indicando si el tag es vacío o no. El color rojo se ha usado para marcar tags desaprobados, cuyo uso no es recomendado. Esto se debe a que han sido reemplazados por otros tags (por ejemplo, el tag applet ha sido reemplazado por el tag object) o porque las hojas de estilos se han convertido en la forma preferida de lograr sus mismos efectos. Los tags tildados en vacio deben dejarse

 

Tag Vacío Descripción corta
<!– –> Yes Inserta comentarios ocultos
<!DOCTYPE> Yes Establece el tipo de documento
<a> Inserta vínculos o marcadores
<abbr> Explica abreviaciones
<acronym> Explica acrónimos
<address> Provee información de contacto
<applet> Inserta un applet (scripts)
<area> Yes Define sectores para mapas de imagen
<b> Texto en negrita
<base> Yes URI base para resolver URIs relativas
<basefont> Yes Tamaño de la fuente predeterminado
<bdo> Suprime el algoritmo bidireccional
<big> Texto en tamaño “grande”.
<blockquote> Citar párrafos
<body> Contiene los elementos a mostrar
<br> Yes Fuerza un quiebre de línea
<button> Crea un botón
<caption> Establece un título para una tabla
<center> Centra su contenido
<cite> Inserta una cita o referencia
<code> Representa texto de computadora
<col> Yes Da atributos a columnas en una tabla
<colgroup> Agrupa columnas en una tabla
<dd> Define descripciones en una lista
<del> Indica texto eliminado
<dfn> Asigna una definición a un término
<dir> Inserta una lista de directorios (árbol)
<div> Define un bloque de contenido
<dl> Define una lista
<dt> Inserta un término en una lista
<em> Indica énfasis
<fieldset> Agrupa controles en un formulario
<font> Establece el estilo de fuente
<form> Inserta un formulario
<frame> Yes Inserta un marco
<frameset> Inserta un grupo de frames
<h1> Encabezado de nivel 1
<h2> Encabezado de nivel 2
<h3> Encabezado de nivel 3
<h4> Encabezado de nivel 4
<h5> Encabezado de nivel 5
<h6> Encabezado de nivel 6
<head> Define el bloque de encabezado
<hr> Yes Dibuja una línea o regla horizontal
<html> Contiene al documento
<i> Muestra texto en itálica
<iframe> Inserta un marco dentro del documento
<img> Yes Inserta una imagen
<input> Yes Muestra controles de entrada
<ins> Indica texto insertado
<isindex> Yes Entrada de línea simple
<kbd> Indica texto a ingresarse por el usuario
<label> Establece una etiqueta para un control
<legend> Asigna un título a un “fieldset”
<li> Define un artículo en una lista
<link> Yes Ofrece informacón relacional
<map> Define un mapa de imagen
<menu> Lista menú
<meta> Yes Da información sobre el documento
<noframes> Contenido alternativo para marcos
<noscript> Contenido alternativo para scripts
<object> Ejecuta aplicaciones externas
<ol> Inserta una lista ordenada
<optgroup> Agrupa opciones en un control select
<option> Define una opción en un control select
<p> Define un párrafo
<param> Yes Da un parámetro para un objeto
<pre> Bloque de texto preformateado
<q> Inserta una cita en una línea
<s> Muestra texto tachado
<samp> Representa texto de programas
<script> Contiene scripts
<select> Crea un control select
<small> Muestra texto en letra “pequeña”
<span> Asigna atributos al texto en líneas
<strike> Muestra texto tachado
<strong> Indica énfasis fuerte
<style> Define atributos visuales (hojas estilo)
<sub> Define texto en sub-índice
<sup> Define texto en super-índice
<table> Inserta una tabla
<tbody> Define un cuerpo en una tabla
<td> Celda regular de una tabla
<textarea> Entrada de texto de líneas múltiples
<tfoot> Define un pie en una tabla
<th> Celda de encabezado de una tabla
<thead> Define un encabezado de tabla
<title> Define el título del documento
<tr> Inserta una fila en una tabla
<tt> Muestra texto en “teletype”
<u> Muestra texto subrayado
<ul> Inserta una lista sin orden
<var> Indica una instancia de una variable

Acerca de faleja

Ing. telecomunicaciones @faleja

Publicado el marzo 28, 2011 en Codigo Programación, HTML. Añade a favoritos el enlace permanente. Deja un comentario.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: