Lenguaje HTML y CSS

HTML
Nerea Sánchez Moreno
Gema Rodríguez Calero

INTRODUCCIÓN
• Lenguaje HTML
– Significado de HTML y utilidad
– ¿Por qué HTML no es un lenguaje de programación?
– Etiquetas
– Atributos
• Estructura básica de una página HTML
– Editores de texto plano y editores de documentos web. Ejemplos
– Elementos básicos de la estructura de un documento HTML
– Elementos de bloque y de línea
– Etiquetas básicas
– Atributos globales aplicables a cualquier etiqueta: id, class, style, title
– Listas y tipos
– Encabezados
– Tablas
– Imágenes
– Enlaces

INTRODUCCIÓN
• Personalización del estilo: CSS
– Significado de CSS y utilidad
– Formas de colocación del código CSS
– Selectores básicos
– Colores
– Texto
– Tamaño
– Bordes
– Márgenes
– Posicionamiento
– Imagen de fondo

Significado y utilidad
El lenguaje HTML(hypertext markup language,
‘lenguaje de marcas de hipertexto’) es un
conjunto de etiquetas predefinidas que el
navegador web interpreta a la hora de construir
una página para su visualización. Así, el
HTML es el lenguaje utilizado para
estructurar una página web.

¿Por qué HTML no es un lenguaje
de programación?
Aunque nos refiramos a HTML como
lenguaje de programación no lo es realmente,
pues carece de ciertas características que
definen un lenguaje, como las estructuras de
control y toma de decisiones. Así, se pueden
definir el HTML como una serie de
instrucciones o etiquetas que indican al
navegador cómo debe estructurarse el
contenido.

Etiquetas
Una etiqueta HTML consta de un nombre que la
define encerrado por los símbolos <y>, y escrito
en minúsculas. Existen etiquetas que pueden
contener texto y otras que representan partes de
una estructura. Por ello, se emplea una etiqueta
de cierre (idéntica a la de apertura pero con el
símbolo / ante el nombre) para definir con
precisión qué engloba. Algunas etiquetas no se
pueden cerrar porque no pueden contener nada en
su interior. Se recomienda incluir el símbolo /,
con un espacio, al final de la única etiqueta
presente para indicar que termina ahí.

Etiquetas
Ejemplos de etiquetas:
• Párrafo. <p>
• Salto de línea. <br/>
• Párrafo con contenido en negrita.
<strong></p>

Atributos
• Son valores adicionales que se agregan a una etiqueta para
configurarla o definir su comportamiento. Existen atributos propios
y exclusivos de algunas etiquetas, así como atributos globales
aplicables a cualquier etiqueta.
• Se añaden a la etiqueta de apertura, nunca a la de cierre.
• Cada atributo tiene un nombre que define la propiedad que
modifican y se agrega separados por un espacio de dicho nombre y
del resto de atributos.
• Ejemplos de atributos:
<img> (para insertar una imagen)
src (indica cual es el archivo de la imagen que se muestra)
alt ( para mostrar un texto alternativo si la imagen no está
disponible )

Estructura básica de una página
HTML

Editores de texto plano y editores
de documentos web. Ejemplos
• Un texto plano es un formato de contenido que
solo incluye caracteres imprimibles.
• Para crear un documento HTML se puede utilizar
un editor de texto plano.
• Notepad++, Aptana Studio, Sublime Text,
NetBeans u otros de Linux como gedit o Kate,
son ejemplos de editores de documentos HTML.
• Microsoft Word y LibreOffice Writer no
entran en esta categoría.

Elementos básicos de la estructura
de un documento HTML
Nombre del elemento Definición
DOCTYPE
Informa al navegador de que tipo de archivo
se trata. Es la primera etiqueta del
documento
<html>
Elemento raíz que contiene todo el
documento HTML. Se define después del
DOCTYPE.
<head>
Es el primer elemento que aparece en el
interior de <html>
<meta charset=“UTF-8”/>
Indica al navegador el tipo de codificación
de caracteres que utiliza el editor. Para no
tener problemas al utilizar caracteres
especiales, se recomienda aplicar UTF-8
como valor.
<body>
A continuación de <head>.
El contenido que se mostrará al usuario
deberá incluirse dentro del elemento
<body>.

Elementos básicos de la estructura
de un documento HTML

Elementos de bloque y de línea
• Elemento de bloque
 Ocupan por defecto todo el
ancho disponible dentro del
elemento que los contiene.
 Los elementos situados tras un
elemento de bloque siempre se
sitúan debajo de este, aunque se
modifique su ancho y puedan
disponerse uno junto a otro.
 Pueden contener otros elementos
de bloque y de línea.
 Ejemplos de elementos de
bloque: los párrafos (<p>), los
bloques de división (<div>), las
listas (<ul>, <ol>) y las tablas
(<table>).
• Elementos en línea
 Ocupan solo el ancho necesario
definido, por ejemplo por la
cantidad de texto incluido o por
el tamaño de la imagen mostrada.
 Se sitúan uno junto al otro hasta
ocupar el ancho disponible.
 Solo pueden contener otros
elementos en línea, texto e
imágenes.
 Ejemplos de elementos en línea:
las imágenes(<img>), los enlaces
(<a>), los botones (<button>) y el
texto resaltado (<strong>).

Etiquetas básicas
• Divide la página en secciones
• Permite aplicar estilos con CSS más
fácilmente
División
<div>
• Representa un párrafo.
• Establece márgenes superiores e inferiores
con respecto al resto del contenido.
Párrafo
<p>
• Representa un subíndice
• Tamaño menor y desplazado hacia abajo
Subíndice
<sub>

Etiquetas básicas
• Fuerza un salto de línea en el texto
• No tiene etiqueta de cierre
Salto de línea
<br>
• Dibuja una línea de separación en la página
• No tiene etiqueta de cierre
Separación
horizontal
<hr>
• Similar a <div>
• No define un bloque
• Agrupa textos y otros elementos en línea.
Agrupar elementos
en línea
<span>

Listas y tipos
• Una lista es estructura que engloba un conjunto de elementos
que la componen.
• Si no establece un orden concreto se llama “lista desordenada”,
como la lista de la compra.
• Si se quiere establecer un orden, se utiliza la “lista ordenada”,
como en la clasificación de un campeonato
• Los elementos que componen la lista utilizan la etiqueta <li> .
• La lista ordenada se representa con la etiqueta <ol> y puede
contener atributos como reversed (invierte el orden), start (establece
en qué número empieza la lista) y type (indica qué tipo de numeral
se va a emplear: 1-números, a-letras minúsculas; A-letras
mayúsculas…)
• La lista desordenada se representa con <ul> y normalmente el
navegador inserta círculos negros, lo que se puede modificar.

Listas y tipos
Código HTML
Resultado visual

Listas y tipos
• Las listas anidadas son listas internas en el
interior de un elemento de otra lista principal .
 No se debe cerrar la etiqueta <li> hasta no
haber cerrado la etiqueta interna.
Cómo agregar una lista anidada:
1. Abrir un elemento de la lista principal (<li>)
2. Escribir el texto que precederá a la lista anidada
3. Añadir las etiquetas de la lista interna
4. Cerrar elemento de la lista principal

Listas y tipos
Código HTML Resultado visual

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

Tablas
• Una tabla (<table>) es un elemento de bloque
empleado para estructurar una serie de datos
alineados según un esquema de filas y columnas.
• Las filas se representan con <tr>, y estas
contienen celdas o <td>.
• El atributo border se utiliza para dibujar bordes
de separación entre las celdas.
• Para unir celdas se utilizan los atributos (dentro
de <td>) colspan (columnas) y rowspan (filas)

Tablas
Código HTML
Resultado visual

Imágenes
Elementos en
línea
<img>
No tiene
etiqueta de
cierrre
Atributo width
(ancho en
píxeles)
Atributo
height (alto en
píxeles)

Imágenes
• Si se quiere incluir una imagen externa (en un servidor de
internet distinto) se debe incluir la URL completa:
Imagen en el
subdirectorio img
Imagen en el directorio
anterior (padre)
Imagen en un servidor
externo
•img/imagen.jpg
•../imagen.jpg
•http://dominio.com/ruta/imagen.jpg

Enlaces
• Son vínculos a otras páginas, que pueden ser:
Locales( en el mismo servidor u ordenador)
Externas( en un servidor externo)
• Se utiliza la etiqueta <a> que englobará un texto y
una imagen que servirá de enlace a la ruta
especificada.
• Se utilizan los atributos href, que incluye la ruta
hacia la página con la que enlazará, y target, cuyo
valor _blank indicará al navegador que deberá
abrir el enlace en otra página.

Personalización del estilo:CSS

Significado de CSS y utilidad
• CSS es el lenguaje utilizado para definir el
modo de presentar el código HTML de una
página web.
• Permite separar la estructura de un documento
(HTML) de su diseño (CSS). Así un solo
archivo CSS puede modificar el aspecto de
varios documentos HTML .

Formas de colocación del código CSS
FORMAS DE VINCULAR CSS A
HTML
DEFINICIÓN
Con el atributo style
•En cualquier etiqueta
•Permite insertar directamente Código
CSS como valor de dicho atributo
•Las diferentes estaciones se separaran
con: ;
Con la etiqueta <style>
•Establece un diseño general que afectará
al todo el documento HTML que lo
incluya.
•Se incluye dentro de: <head>.
En un archivo independiente
•Tendrá una extensión .css.
•Se sitúa en un directorio diferente al de
HTML.
•Es preciso insertar esta etiqueta en la
cabecera.

Selectores Básicos
• Afectan a determinados elementos del
documento HTML.
• Contendrán unas series de reglas con las que
se modificará el aspecto de dichos elementos.
• Formato para escribir dichos elementos:
selector {
propiedad: valor;
propiedad2: valor2;
}

Selectores Básicos
Por Tipo
• Solo para una
etiqueta.
• Sus propiedades
afectan a todos los
elementos del
mismo tipo del
documento HTML.
De Clase
• Va precedido de un
punto.
• Debe representar
una clases añadida
a uno o varios
elementos HTML
mediante el
atributo class
De id
• Corresponde al
nombre de
identificador del
elemento (valor de
su atributo id)
• Afecta solo a un
elemento
• Debe ir precedido
de #

Colores
• Para modificar el color del texto se utiliza la propiedad color.
• Para modificar el color de fondo la propiedad correspondiente es
background-color.
• Algunos métodos para establecer un valor cromático son los
siguientes:
o Nombre del color: blue, red…
o Proporción de cada valor RGB en decimales (de 0 a 25):
rgb(255,0,0)
o Proporción de cada valor RGB en porcentajes: rgb(100%,0%,0%).
o Proporción de cada valor RGB, más un valor de 0 a 1, que indica la
transparencia: rgba(255,0,0,0.5)
o CMYK (cian, magenta, amarillo y negro) con 4 valores entre
paréntesis, bien en % de intensidad o con valores numéricos de 0 y
255): cmyk(50%,100%,0%,0%).

Texto
Propiedades que modifican el texto Función
Text-align Alineación del texto
Text-decoration Subrayado
Text-transform
Transformación
mayúsculas/minúsculas
Font-sice Tamaño de texto
Font-family Tipo de fuente
Font-style Cursiva
Font-weight Grosor del texto
Text-shadow Sombreado

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, un divisor o un párrafo.
 Display: inline. El elemento se comporta como un elemento en línea.
 Display: inline-block. El elemento se establece como un bloque pero se
comporta como un elemento en línea.
• El tamaño de un elemento viene definido por sus
propiedades widht (ancho) y height (alto), que pueden tener
un valor en píxeles o en porcentaje.
• También se puede asignar un tamaño mínimo (min-widht y
min-height) y máximo (max-widht y max-height)

Bordes
Propiedades para añadir
borde
Función
Propiedades
complementarias
Border-widht
Añade grosor al borde de
los cuatro lados (px)
Border-left-width, border-
right-width, border-top-
width y border-botton-
width.
Border-style Trazo que dibuja el borde
Solid, dashed, dotted,
double.
Border-color Define el color del borde
Igual que los valores para
establecer un color de
fondo o de texto
Border
Establece las 3 funciones
anteriores a la vez
Border-left, border-right,
border-top, border-bottom.
Border-radius
Hace referencia al radio de
curvatura de las esquinas
de un elemento
_

Márgenes
• CSS tiene 2 propiedades para establecer
márgenes:
margin. Representa el espacio entre un elemento y
los elementos que lo rodean, o el borde del
elemento que lo contiene. Como valor, se utiliza la
unidad en px o en %.
padding. Representa el espacio entre un elemento
y su contenido. Acepta los mismos valores que la
propiedad margin.

Posicionamiento
• El posicionamiento de los elementos de la página
web se realiza según la estructura HTML
establecida. Así, el navegador los muestra en el
orden determinado por el código: unos dentro de
otros o unos debajo de otros si son elementos de
bloque adyacentes.
• Este comportamiento se puede modificar para
obligar al navegador a dibujar un elemento en un
lugar distinto al original con la propiedad
position.

Posicionamiento
position:static
Valor por defecto
Realiza un salto de
línea para añadir el
siguiente elemento
Modifica su tamaño
con márgenes
Position:
relative
Ocupa el mismo
espacio que el valor
static
Propiedades top,
bottom, left y right
para desplazar el
elemento una
cantidad de px
determinada
postion:
absolute
El elemento se sitúa
en la esquina
superior izquierda
Se despega del
documento
margin-top y
margin-left
Mover un elemento
Con las propiedades
top, left, right o
bottom, deja de
situarse con respecto
al elemento que lo
contiene y emplea
todo el HTML como
referencia
position: fixed
Similar a absolute
Utiliza la ventana
como referencia para
posicionarse
El elemento siempre
estará visible (incluso
haciendo scroll)

Imagen de fondo
• Para establecer una imagen de fondo se utilizan las propiedades:
 background-image. Su valor será la ruta a la imagen desde el
directorio donde se encuentra el archivo CSS. Esta ruta debe incluirse
entre comillas simples y paréntesis, precedida de la palabra url, así:
background-image: url(‘.../img.png’);.
 background-position. Si la imagen es más pequeña que el elemento,
esta propiedad establece la alineación vertical y horizontal de la misma.
Se establecen dos valores separados por espacio: la alineación
horizontal, que puede ser left, center o right, y la alineación vertical,
que puede ser top, center o bottom.
 background-repeat. Si la imagen es más pequeña que el elemento, se
repetirá, por defecto, horizontal y verticalmente hasta ocupar todo el
espacio disponible. Este comportamiento se puede modificar con los
valores no-repeat, reapeat-x (horizontalmente) o repeat-y
(verticalmente).

Lenguaje HTML y CSS

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Lenguaje HTML y CSS

Similar a Lenguaje HTML y CSS (20)

Último

Último (15)

Lenguaje HTML y CSS