Html

Lenguaje HTML
HTML es un lenguaje de marcado que se utiliza para el
desarrollo de páginas de Internet. Se trata de la sigla que
corresponde a HyperText Markup Language, es decir,
Lenguaje de Marcas de Hipertexto, que podría ser
traducido como Lenguaje de Formato de Documentos para
Hipertexto.

Significado de HTML y utilidad
• Básicamente el lenguaje HTML sirve para describir la estructura
básica de una página y organizar la forma en que se mostrará su
contenido, además de que HTML permite incluir enlaces (links)
hacia otras páginas o documentos.
• HTML es un lenguaje de marcado descriptivo que se escribe en
forma de etiquetas para definir la estructura de una página web y su
contenido como texto, imágenes, entre otros, de modo que HTML es
el encargado de describir (hasta cierto punto) la apariencia que
tendrá la página web.

¿Por qué HTML no es un lenguaje de
programación?
HTML no es un lenguaje de programación, aunque de
forma coloquial muchas veces se oigan referencias a HTML
como si lo fuera. HTML es un lenguaje de etiquetas. Estas
etiquetas (tag) HTML comunican al navegador cuál es la
información a mostrar por pantalla, además del formato de
dicha información.

Etiquetas
Las etiquetas HTML son fragmentos de texto rodeados por corchetes
angulares < >, que se utilizan para escribir código HTML, en HTML
existen
Etiquetas de apertura.
Etiquetas de cierre.
Tienen la forma: <etiqueta> </etiqueta>. Donde <etiqueta> es la
etiqueta de apertura y </etiqueta> es la etiqueta de cierre indicada por
la diagonal. HTML tiene definidas gran variedad de etiquetas para
distintos usos.

Atributos
• Los atributos son la forma que tienen los autores de definir
propiedades para un elemento. Estas propiedades habitualmente
cambian la forma en que los navegadores interpretan al elemento, al
cambiar su significado o presentación. Por ejemplo, el elemento <a>
inserta un vínculo en el documento, pero el atributo "rel" indica la
relación entre el documento actual (el que contiene al vínculo) y el
recurso de destino (al cual el vínculo está apuntando).
• Muchos de los atributos en HTML, aquellos conocidos como
atributos globales, están disponibles para todos los elementos del
estándar. Pero la mayoría de los elementos tienen además un
conjunto de atributos específicos que sólo están disponibles o
específicamente adaptados para ellos.

Estructura básica de una página HTML
En resumen, la estructura básica de un
documento HTML es la siguiente:
<html>
<head>
<title>Título</title>
</head>
<body>
<div> Contenido de la página </div>
</body>
</html>

Editores de texto plano y editores de
documentos web. Ejemplos
• Texto plano: es un formato de contenido que solo incluye
caracteres imprimibles. Frente al texto plano se encuentra el
texto con diagramación o maquetación, que incluye caracteres
de control no imprimibles para añadir efectos al texto, como
la negrita, cursiva o tamaño de fuente.
• Ejemplos texto plano: Dos ejemplos son Notepad o Bloc de
Notas (incluido en Windows) y Kate (GNU/Minix). Con
cualquiera de los dos bastaría para escribir las líneas de
código necesarias para diseñar una página Web.
• Documentos web: es una aplicación diseñada con el fin de
facilitar la creación y edición de
documentos HTML o XHTML. Su complejidad puede variar
desde la de un simple editor de texto plano,
entornos WYSIWYG, hasta editores WYSIWYM.

Elementos básicos de la estructura de
un documento HTML
• Cada página comienza con: < HTML > .
• A continuación viene la cabecera, delimitada por < HEAD > y < /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 >.
• <div> : permite dividir la página en secciones y permite aplicar estilos con
CSS mas fácilmente.
• La página acabará con < /HTML > .
• La cabecera de un documento está delimitada por las etiquetas < HEAD > y
</HEAD > Sus componentes son opcionales. El más importante es
<TITLE> , que permite escribir el título del documento. El título no se
muestra en la página, sino en la parte superior de la ventana del
visualizador, como identificador en los bookmarks y en la history list.
• El cuerpo es la parte delimitada por <BODY> y < /BODY > .

Elementos de bloque y de línea
Tipos de elementos
Elementos de
bloque
Ocupan todo el ancho disponible.
Pueden contener otros elementos de bloque.
Los párrafos <p> , los bloques de división <div>, listas
<ul>, <ol> y las tablas <table> constituyen ejemplos de
este tipo.
Elementos en línea
Ocupan solo el ancho necesario.
Se sitúan uno al lado del otro.
Solo pueden contener otros elementos en línea, texto e
imágenes.
Ejemplos: imágenes (<img>), botones (<button) y el texto
resaltado(<strong>)

Atributos globales aplicables a
cualquier etiqueta: id, class, style,
title
• ID: Define un identificador único (ID) el cual debe ser
único en todo el documento. Asigna un nombre a un
elemento.
• Class: Es una lista de clases del elemento, separadas por
espacios.
• Style: Es el elemento encargado de indicar la
información de estilo.
• Title: Contiene un texto que representa información de
asesoramiento en relación al elemento al que pertenece.

Listas y tipos
• Listas no ordenadas <ul> : las listas no ordenadas van dentro de
la etiqueta <ul> HTML y de su cierre </ul>. Cada punto que
queramos añadir a la lista, lo haremos dentro de la etiqueta <li> y
su cierre.
• Listas ordenadas <ol> : las listas ordenadas van enmarcadas
dentro de las etiquetas <ol> </ol>. Cada punto de la lista se escribe
con la misma etiqueta que en las no numeradas: <li>. Pero al ser
listas ordenadas los símbolos serán números y éstos se irán
generando automáticamente por orden, conforme escribamos
nuevos puntos.

Listas y tipos
•Listas de definiciones: <dl>, <dt> y <dd> : Si lo que
vamos a hacer es un listado de definiciones, podemos usar las
etiquetas <dl>, <dt> y <dd>. Vamos a explicarlas por partes:
-La etiqueta <dl> viene de los términos ingleses “Definiton list”
y nos indica que dentro de ella, entre ella y su cierre, va a ir una
definición.
-La etiqueta <dt> viene de los términos “Definition term” y
dentro de ella irá el término que vamos a definir. Para
entendernos mejor, dentro de <dt> iría el título de la definición.
-La etiqueta <dd> viene de los términos “Definition description”
y nos dice que dentro de ésta irá la definición.
Si escribimos varios listados de definición, éstas se separarán
automáticamente entre ellas para facilitar su diferenciación.

Encabezados
Atributo Valor Efecto visual
ALIGN LEFT
RIGHT
CENTER
JUSTIFY
Texto alineado a la
izq.
Texto alineado a la
derec.
Texto centrado
Texto justificado
ID Otorga una
identificación a la
etiqueta.
LANG Especifica un
idioma diferente.
CLASS Asigna una clase a
los contenidos
(hojas de estilo)

Tablas
• En documentos HTML una tabla puede ser considerada como un
grupo de filas donde cada una contiene a un grupo de celdas.
Como muchas otras estructuras de HTML, las tablas son construidas
utilizando elementos. En particular, una tabla básica puede ser
declarada usando tres elementos, a saber, <table> (el contenedor
principal), <tr> (representando a las filas contenedoras de las
celdas) y <td> (representando a las celdas).

Imágenes
Para incluir imágenes en el contenido de una página utilizaremos la
etiqueta <img>, que es una etiqueta muy sencilla, que dispone de
varios atributos para modificar como se verá la imagen (los atributos
src y alt son siempre obligatorios)

Enlaces
Los enlaces en HTML se crean mediante la etiqueta <a>.
Un enlace aparece generalmente como un texto azul
subrayado y cuando situamos el cursor sobre él se
transforma en una mano con el dedo índice extendido. Si
pulsamos sobre el enlace saltamos a otra parte del
documento, a otro documento situado en cualquier lugar, o
incluso se abre el programa de correo para enviar un
mensaje a la dirección indicada.
En general los enlaces tienen la siguiente estructura
<A HREF="URL"> Texto del enlace</A>
El texto del enlace es lo que se visualizará en el navegador.

Personalización del estilo: CSS
Facilita la incursión en el código y te proporciona
las herramientas con las que personalizar tu web o
blog.
Su función es aplicar tu propio estilo a titulares,
párrafos, botones, etc.

Significado de CSS y utilidad
El nombre viene del inglés Cascading Style Sheets, significa
Hojas de Estilo en Cascada y su función es cambiar el
aspecto por defecto de los elementos HTML que forman
una web.
Los estilos CSS definen la apariencia de los elementos
HTML a la hora de mostrarse en el navegador. Un solo
cambio en la hoja de estilos puede modificar multitud de
elementos de una web.
Sin utilizar CSS los elementos de una web se disponen unos
debajo de otros. Una vez apliquemos el estilo CSS colocará
todo en su sitio y le dará el aspecto deseado.

Formas de colocación del código CSS
• En un atributo HTML, con el
atributo style: Se puede incluir en
cualquier etiqueta y permite insertar
código CSS como valor de dicho atributo.
• Con la etiqueta <style>: Permite
establecer un diseño general que afectará a
todo el documento HTML en el que se
encuentre dicha etiqueta. Esta se incluye
dentro del elemento <head>.
• En un archivo independiente: Este
archivo tendrá una extensión .css, se
situará en un directorio diferente al de los
otros documentos HTML.

Selectores básicos
Selectores por tipo: Se escribe el nombre de una etiqueta. Las
propiedades modificadas en este selector afectarán a todos los
elementos del mismo tipo en el documento HTML.
Selectores de clase: El nombre del selector debe ir precedido de un punto
y debe representar una clase añadida a uno o varios elementos HTML
mediante el atributo class. Las propiedades modificadas en el interior
afectarán a todos los elementos para los que se haya establecido dicha clase
como atributo.
Selectores de id: Corresponde al nombre del identificador de un elemento
(al valor de su elemento id). Afecta solo a un elemento, ya que los
identificadores son únicos y no se pueden repetir. El nombre del identificador
debe ir precedido de almohadilla (#).

Colores
Para modificar el color del texto que incluye un elemento, se utiliza la
propiedad color . Para modificar el fondo, la propiedad
correspondiente es background-color.
Los valores de un color se pueden definir en diferentes formatos que
indican las proporciones de los tres colores básicos.
Los métodos que permiten establecer un valor cromático son los
siguientes:
▫Nombre del color
▫Proporción de cada valor RGB hexadecimal precedido de almohadilla:
#FF0000
▫Proporción de cada valor RGB en decimales, de 0 a 255
▫Proporción de cada valor RGB en porcentajes
▫Proporción de cada valor RGB, más un valor del 0 al 1 (alpha) que indica
la transparencia de dicho color.

Texto
Alineación del
texto dentro del
elemento. (Text
-align)
Left (A.
izquierda)
Right (A.
derecha)
Justify (A.
justificada)
Center
(A.
centrada)
Subrayado
(Text-decoration)
Underline
(Subrayado)
None
(Quita
propiedad
de
subrayado)
Overline
(Línea encima
del texto)
Line-
through
(Tachado)
Transformació
n mayúsculas
minúsculas
(text-
transform)
Uppercase
(Mayúsculas)
Loqercase
(Minúsculas)
Capitalize
(Primera letra
en mayúscula)
Tamaño
del texto
(font-size)
Px
(Píxeles)
Pt (Puntos)
%
(Porcentaje)
Em
(Porcentaje
sobre base
1)
Como valor
relativo: x-
small, small,
medium, large
o x-large
Tipo de
fuente
(Font-
family)
Nombre de
fuentes
genéricos:
Serif, sans-
serif o
monospace.
Ejemplos: font-
family:
Helvestica,
Verdana,
Times New
Roman, serif
Cursiva
(Font-style)
El valor
italic
transforma
el texto en
cursiva
El valor
normal
retira la
propiedad
Grosor del
texto (Fonto-
weight)
El valor bold
transforma el
texto en
negrita
El valor
normal lo
elimina
Sombreado
(Text-shadow)
Indica el
desplazamient
o hacia la
derecha
Indica el
desplazamient
o hacia abajo
Indica el
difuminado de
la sombra
Le valor indica
el color de la
sombra

Los elementos en línea varían en función del espacio que ocupe su
contenido. La anchura y la altura de un elemento de puede establecer
con propiedades CSS. Para modificar la forma en la que el navegador
considera un elemento, se establecen las siguientes propiedades:
•Display: block. El elemento afectado se comporta como un
elemento de bloque. Como un divisor (<div>) o un párrafo.
•Display: inline. Se comporta como un elemento en línea. Se aplica
a varios (<div>) .
•Display: inline-block. Se comporta como un elemento en línea.
El tamaño se define por sus propiedades height (ancho) y height
(alto). El tamaño máximo se define por las propiedades max-width y
max-height. el tamaño mínimo se define mediante las propiedades
min-width y min-height.
Tamaño

Bordes
Las propiedades CSS que permiten añadir un borde a un elemento son las
siguientes:
•Border-width: Se encarga de añadir grosor. De forma iondependiente
sepuede establecer a través de las propiedades border-left-width,
border-right-width, border-top-width y border-bottom-width.
•Border-style: Es el tipo de trazo con el que se dibuja el borde: Se
puede trazar de forma individual con la propiedad border-width.
•Border-color: Se encarga de definir el color del borde. Los valores
para llevar acabo esta opción son idénticos a los del color del fondo o
texto.
•Border: Permite establecer las tres propiedades anteriores al mismo
tiempo. Se debe especificar una medida, un estilo y un color. Se pueden
establecer individualmente escribiendo border-left, border-right,
border-top y border-bottom.
•Border-radius: Hace referencia al radio de la curvatura de las
esquinas. Es necesario establecer cuatro medidas separadas por espacios.

Márgenes
margin
• Es una forma reducida de
establecer la separación de los
cuatro bordes al mismo tiempo.
padding
• Es la cantidad de espacio a
insertar entre el objeto y su
margen o, si hay un borde
(propiedad border) la distancia
entre el objeto y el borde.

Posicionamiento
Hay diferentes tipos de posicionamiento:
 Static: después de cada elemento realiza un salto de línea.
 Relative: Ocupa el mismo espacio que si su valor fuera static. Se
puede desplazar la posición con las propiedades: top, bottom,
right y left.
 Absolute: El elemento se sitúa en la esquina superior izquierda.
 Margin-top y margin-left: Permiten mover un elemento. Al
aplicar las propiedades: top, bottom, right y left; el elemento
emplea todo el documento como desplazarse.
 Fixed: El elemento se sitúa en la esquina superior izquierda pero
utiliza la ventana como referencia para posicionarse, de esta manera
el elemento está visible siempre.

Imagen de fondo
• Background-image: Su valor será la ruta a la imagen desde el
directorio donde se encuentra el archivo CSS.
• Background-position: Establece la alineación vertical y
horizontal de la imagen. La alineación vertical puede ser: top
(arriba), center (centro) y bottom (abajo). La alineación
horizontal puede ser: left (izquierda), center (centro) y right
(derecha).
• background-repeat: El elemento se repetirá horizontal o vertical
hasta ocupar todo el espacio disponible. Se modifica con los valores
no-repeat (no se repite), repeat-x (se repite horizontalmente) y
repeat-y (se repite verticalmente).

Html

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Html

Similar a Html (20)

Último

Último (11)

Html