Lenguaje html

Por Isidoro Pardo Martínez
y Óscar Igarza Domínguez

 Son las siglas de HyperText Markup
Language, y sirve de referencia del
software para la creación de páginas
web. Se podría decir que es el
lenguaje básico en Internet.

 Es única y exclusivamente, una serie de
etiquetas que sirven para distribuir un
contenido específico en uno o mas
sitios web.
 La gente lo llama “lenguaje”, porque la
L de HTML así lo indica… sin embargo
HTML es un formato de archivo que es
interpretado por los conocidos
navegadores (internet explorer, chrome,
safari, firefox…) para mostrarnos la
información que los webmasters.

 Etiqueta: Elementos rodeados por corchetes
angulares (<, />) que modifican la
apariencia y distribución del contenido en
la pagina, se escriben al principio de la
etiqueta (< etiqueta) y al final de esta
(etiqueta />)
• Cursiva:(<em [texto] /em>)
• Negrita:(<strong [texto] /strong>)
• Párrafo: (<p [texto] /p>).

 Atributos: Elemento son pares nombre-
valor, separados por un signo de igual (=)
y escritos en la etiqueta de comienzo de
un elemento, después del nombre del
elemento, el valor está rodeado por
comillas dobles o simples. Se agregan a
una etiqueta para configurarla o definir
su comportamiento.
<img src=”imagen.jpg” alt=”Imagen de prueba” />

 Editores de 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.

 Editores de 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.
WYSIWYG: WYSIWYM:

 Elementos básicos de la estructura de un documento
HTML:
 DOCTYPE: Informa al navegador de qué tipo de
archivo se trata. Se incluye en la primera
etiqueta del documento.

 <html>: Elemento raíz que contiene todo el
documento HTML.

 <head>: Primer elemento que aparece en el
interior de <html>. Incluye información general
sobre la página web. <title> es el único valor
que se muestra al usuario.

 <meta charset=“UTF-8”/>: Se emplea para indicar
al navegador el tipo de codificación de
caracteres que utiliza el editor.

 <body>: se añade a continuación de <head>. El
contenido que se mostrará al usuario se incluye
en esta eetiqueta.

 Elementos de bloque:
 Ocupan todo el ancho disponible dentro del elemento que los
contiene
 Pueden contener otros elementos de bloque (depende del
elemento en cuestión) y otros elementos en línea
 Los parrafos (<p>), los bloques de división (<div>), las listas
(<ul>,<ol>) y las tablas (<table>) constituyen ejemplos de este
tipo de elementos.

 Elementos en línea:
• Ocupan tan solo el ancho necesario, que viene definido,
por ejemplo, por la cantidad de texto incluido o por el
tamaño de imagen que debe mostrar.
• Estos elementos solo pueden contener otros elementos en
línea, texto e imágenes.
• Las imágenes (<img>), los enlaces (<a>), los botones
(<button>) y el texto resaltado (<strong>) constituyen
ejemplos de este tipo de elementos.

 Etiquetas básicas:
• División : <div>. Permite dividir la pagina en
secciones. La división del documento en secciones es
muy útil, ya que permite aplicar estilos con CSS más
fácilmente.
• Párrafo: <p> Representa un párrafo y solo puede
englobar elementos en línea.
• Agrupar elementos en línea: <span> Similar a <div>,
pero no define un bloque. Se utiliza para agrupar
textos y otros elementos en línea, así como para, con
posteridad

• Subrayado: <u>
• Cursiva o énfasis: <em>
• Negrita o texto destacado: <strong>
• Subíndice: <sub> El texto que engloba esta etiqueta
representa un subíndice y aparece en un tamaño
menor y desplazado hacia abajo.
• Superíndice: <sup>
• Salto de línea: <br> Fuerza un salto de línea en el
texto. No tiene etiqueta de cierre.
• Separación horizontal: <hr> Dibuja una línea de
separación en la línea de separación horizontal. No
tiene etiqueta de cierre

 Atributos globales:
• 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: Una lista es una estructura que engloba un
conjunto de elementos que la componen.
Los elementos que componen la lista se se representa con la
etiqueta <li> en ambos casos. Esta etiqueta es equivalente a
un párrafo en cuanto a su contenido y, por tanto, constituye un
elemento de bloque
La lista ordenada se representa con la etiqueta <ol>, que
admite atributos como reversed , start, y type

 Encabezados: Son párrafos especiales destinados a la
creación de títulos para las diferentes secciones y
subsecciones se una pagina web. Son definidos por las
etiquetas <h1> hasta <h6>
 <h1> representa el encabezado de mayor nivel y se mostrará
con el tipo de letra mas grande; <h2> será un poco más
pequeño, y así sucesivamente

 Tablas: Una tabla (<table>) es un elemento de bloque que se
emplea para una serie de datos alineados según un esquema
de filas y columnas.
 Las filas de una tabla se representan con la etiqueta <tr> y
estas solo contienen celdas o <td>

Para que una celda ocupe dos o mas filas o
columnas se utilizan atributos aplicados
directamente en la etiqueta <td>, como cospan
(nº de columnas) y rowspan (nº de filas )

 Imágenes: Las imágenes en HTML son elementos en línea, y
se representan con la etiqueta <img>, la cual no va
acompañada de etiqueta de cierre alguna
 En el caso de que se trate de una imagen externa (en un
servidor de internet distinto), se incluye la URL completa:

 Significado de CSS y utilidad:
Es el lenguaje utilizado para definir
el modo de presentar el código HTML de una
página web.
Su utilización permite separar la
estructura de un documento (HTML) de su
diseño o presentación (CSS). Así puede
modificar un archivo CSS el aspecto de
varios archivos HTML.

 Formas de colocación del código
CSS:
- En un atributo HTML, con el
atributo style

- En un archivo independiente
Este archivo tendrá una extensión .css,
se situara por lo general en un
directorio diferente al de los documentos
HTML.

 Selectores básicos:
Estos selectores afectan a determinados
elementos del documento HTML y contienen
una serie de reglas o propiedades con las
que se modifica el aspecto de dichos
elementos. Tal que así:

- Selector por tipo:
Afectan a todos los elementos del mismo
tipo en el documento HTML, como párrafos
(p) o enlaces (a). Es una manera de
establecer un estilo por defecto a los
elementos de una página.

- Selector de clase:
Este selector va precedido por un punto
(.) y representa una clase añadida a uno
o varios elementos HTML mediante el
atributo class. Las propiedades
modificadas en su interior afectan a
todos los elementos para los que se haya
establecido dicha clase como atributo.

- Selector de id:
Corresponde al nombre el identificador
de un elemento, es decir, al valor de su
atributo id.
Afecta a un solo elemento ya que son
únicos y no se pueden repetir. Le precede
una almohadilla (#).

- ¿Qué ocurre cuando tenemos más de
un selector para un elemento?
El de mayor prioridad afecta al
identificador, seguido del de clase y,
después, el de tipo.
Como aquí:

 Colores:
- Cambiar color:
Para cambiar el color de texto que
tiene un elemento se utiliza la propiedad
color, y para modificar el color del
fondo se utiliza la propiedad de
background-color.

- Métodos para establecer un valor
cromático:
El sistema RGB (Red Green Blue), que
explicaremos más adelante, es el más
usado en informática, además de
utilizarse en las televisiones de “culo”,
impresoras, etc., y el CMYK (Cian Magent
Yellow blacK) también es utilizado pero
en menor medida, este último utiliza el
texto cmyk seguido por cuatro valores
entre paréntesis, entre valores numericos
del 0 al 255 o bien en porcentajes. Por
ejemplo:cmyk(50%, 100%, 0%, 0%)

cromático:
· Nombre del color: blue, red, green...
(todo en inglés siempre).
· Proporción de cada valor RGB en
código hexadecimal precedido de
almohadilla: #FF0000.
· Proporción de cada valor RGB en
decimales, de 0 a 255: rgb(255,0,0).

cromático:
· Propoción de cada valor RGB en
porcentajes: rgb(100%, 0%, 0%).
· Proporción de cada valor RGB, más un
valor de 0 a 1 (alpha) que indica la
transparencia de dicho color: rgba(255,
0, 0, 0.5).

 Texto
El prefijo que utilizamos para algunas
propiedades que modifican sun aspecto es
font o text.
- Alineación con el texto (text-align):
Define la alineación del texto
dentro del elemento. Los valores comunes
son: left, right, center y justify.

- Subrayado (text-decoration):
Permite dibujar una línea rayando
por encima, por debajo o tachando el
elemento seleccionado. Underline
(subrayado), none (quitando la propiedad de
subrayado si la tuviera), overline (línea
encima del texto) y line-through (tachado).
- Transformación mayúsculas/minúsculas
(text-transform):
Sus valores pueden ser uppercase
(mayúsculas), lowercase (minúsculas) y
capitalize (la primera letra de cada palabra
en mayúscula).

- Tamaño del texto (font-size):
Define el tamaño del texto
contenido.Los valores son numéricos, para
los que varía la unidad de medida
utilizada: px (píxeles: 12px), pt
(puntos: 12pt), % (porcentaje respecto a
100% ningún cambio), em (como el
porcentaje solo que en tanto por uno:
120% = 1.2em). También se pueden usar
tamaños relativos, como x-small, small,
medium, large o x-large.

- Tipo de fuente (font-family):
Establece el tipo de fuente, hay
nombres de fuente genéricos, como serif,
sans-serif o monospace, que aplican la
feunte por defecto del navegador con
dicho estilo, por ejemplo: font-family:
Helvetica, Verdana, “Times New Roman”,
serif;.

- Cursiva (font-style):
Permite aplicar cursiva al texto.
El valor italic tranforma el texto en
cursiva, mientras que el valor normal
retira esta propiedad.
- Grosor del texto (font-weight):
Hay muy pocas fuentes que soporten
diferentes grosores más allá de la
negrita y del texto normal. El valor bold
transforma en negrita y normal la
elimina.

- Sombreado (text-shadow):
Dibuja una sombra alrededor del
texto. Se expecifican 4 valores, los 3
primeros son números en píxeles (px) y
el 4º es el color de la sombra en
inglés. Por ejemplo: text-shadow: -4px
2px 5px grey;.

 Tamaño:
Para modificar la forma en la que el
navegador considera un elemento, se
pueden establecer 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 : El elemento se
comporta como un elemento en línea. Si se
aplica a varios <div> seguidos, estos se
situarían uno junto a otro.
- display: inline-block : El elemento
se establece como un bloque pero se
comporta como uno en línea, al estilo de
una imagen. Los cambios de tamaño tienen
efecto en los elementos con esta
propiedad.

El tamaño de un elemento viene definido
por sus propiedades height (alto) y width
(ancho). Existe la posibilidad de
establecer tamaños mínimos y máximos.
(max-width, min-width y max-height, min-
height)

 Bordes:
Las propiedades CSS que permiten añadir
un borde a un elemento son:
- border-width: añade grosor al borde
de los cuatro lados. Se suele establecer
en px y, opcionalmente, de forma
independiente a cada lado a través de las
propiedades border-left-width, border-
rigth-width, border-top-width y border-
bottom-width.

- border-style: tipo de trazocon el que
se dibuja el borde. Los valores más
comunes son solid (línea continua),
dashed (línea discontinua), dotted (con
puntos) o double (línea continua doble).
También se puede especificar en cada uno
de sus lados.
- border-color: Define el color del
border y los valores que se suelen
utilizar son como los de un color de
fondo o de texto.

- border: Propiedad genérica que
permite establecer las tres propiedades
anteriores a la vez. Para ello,
especificamos la medida, un estilo y uhn
color separados por un espacio, no
importa el orden. Por ejemplo: border:
2px solid red;.

- border-radius: Su valor se establece
habitualmente en px y hace referencia al
radio de curvatura de las esquinas de un
elemento, se establecen 4 medidas,
empezando por la esquina superior
izquierda y siguiendo en el sentido de
las agujas del reloj.
Por ejemplo: border-radius: 5px 8px 5px
8px

 Márgenes:
Para establecer un espacio de
separación entre un elemento y su otros
que lo rodean o entre el borde del
elemento y su contenido, CSS dispone de
dos propiedades:
- margin: Representa el espacio entre
un elemento y los que lo rodean, o el
borde del elemento que lo contiene. Se
utiliza una unidad de medida en px o
porcentaje.

-padding: Representa el espacio entre
un elemento y su contenido. Acepta los
mimos valores que la propiedad margin.
En ambas se pueden modificar cada uno
de los márgenes por separado con los
sufijos: -left, -right, -top y -
bottom.
Por ejemplo: margin: 10px 5px 20 px 5px

Cabe tener en cuenta que el navegador a
la hora de calcular el tamaño qu ocupa un
elemento suma el tamaño del margen
interno o padding y el grosor del borde
al elemento. Por lo tanto un elemento con
un ancho de 200px, un padding de 20 px (a
cada lado) y un grosor de 5px (a cada
lado), ocupará 250px.

 Posicionamiento:
Se realiza según la estuctura HTML
establecida. Aunque este comportamiento
se puede modificar para obligar al
navegador a dibujar un elemento en un
lugar distinto al original, lo que se
consigue con la propiedad CSS position:

- position: static; : Es el valor por
defecto que realiza un salto de línea
para añadir debajo el siguiente elemento,
según el orden establecido en la
estructura HTML. Se puede modificar
añdiendole márgenes.
- position: relative : Ocupará el mismo
espacio que si su valor fuera static.
Utilizando las propiedades top, bottom,
left y right desplazamos una cantidad de
px a partir del lado seleccionado.

- position: absolute: Al aplicar este
valor el elemento se situa en la esquina
superior izquierda del elemento que lo
contiene. Y además “pasa” de todos los otros
elementos, la posición se interpreta como si
no estuviera ocupando espacion en el
documento, como si se situará en una capa
superior.
- position: fixed : Es similar a
absolute,con la excepción de que utiliza la
ventana en vez del documento como referencia
para posicionarse, lo que resulta útil para
crear barras de navegación que sean
fácimente accesibles para el usuario.

- margin-top y margin-left: Permiten
mover un elemento. Aunque si utilizamos
las propiedades top, left, right o
bottom, el elemento se situará pegado al
lado izquierdo de la página y a 20px de
distancia de la parte inferior del
documento.

 Imagen de fondo:
Para establecer una imagen de fondo en
un elemento, usamos:
- background-image: Su valor será la
ruta a la imagen desde el directorio
donde se encuentre el archivo CSS. Tal
que así: background-image:
url(‘../img.png’);.

- background-position: Cuando la imagen
sea más pequeña que el elemento, esta
propiedad establece la alineación
vertical y horizontal de la misma. Se
establecen dos valores por separado: la
alineación horizontal (left, center o
right), y la vertical (top, center o
bottom).

- background-repeat: Si la imagen es
más pequeña que el documento la imagen se
repetirá hasta ocupar todo el espacio. Se
puede modificar este comportamiento con
los valores no-repeat, repeat-x
(horizontalmente) o repeat-y
(verticalmente).

Lenguaje html

Más contenido relacionado

La actualidad más candente

Similar a Lenguaje html

Último

Lenguaje html