Lenguaje html y css

R I C A R D O F E R R A N D O G Ó M E Z
J O S É A N T O N I O V E L A S C O L Ó P E Z
LENGUAJE HTML Y CSS

ÍNDICE
1. Lenguaje HTML
1.1 Significado HTML y utilidad
1.2 ¿Por qué HTML no es un lenguaje de programación?
1.3 Etiquetas
1.4 Atributos
2. Estructura de una página HTML
2.1 Editores de texto plano y editores de textos web. Ejemplos
2.2 Elementos básicos de la estructura de un documento HTML
2.3 Elementos de bloque y de línea
2.4 Etiquetas básicas

ÍNDICE
2.5 Atributos aplicables a cualquier etiqueta: id, class, style, title
2.6 Listas y tipos
2.7 Encabezados
2.8 Tablas
2.9 Imágenes
2.10 Enlaces
3. Personalización del estilo: CSS
3.1 Significado de CSS y utilidad
3.2 Formas de colocación del código CSS
3.3 Selectores básicos
3.4 Colores

ÍNDICE
3.5 Texto
3.6 Tamaño
3.7 Bordes
3.8 Márgenes
3.9 Posicionamiento
3.10 Imagen de fondo

SIGNIFICADO DE HTML. UTILIDAD
HTML significa Lenguaje marcado de híper texto
Lenguaje: uso de palabras
Marcado: es la edición que realizas sobre el texto.
Hiper: los programas antiguos leían el código línea por
línea. HTML puede leer a saltos.
Texto: contenido
HTML sirve para que los navegadores sepan
como estructurar una página web.

¿POR QUÉ HTML NO ES UN LENGUAJE
DE PROGRAMACIÓN?
 No lo es porque no posee atributos propios de los
lenguajes de programación como la toma de
decisiones.
 HTML consiste solo en instrucciones que un
navegador sigue para estructurar una página web.

ETIQUETAS
ETIQUETA FUNCIÓN
<html> </html> Indica el principio/cierre de la página
HTML
<head> </head> Indica el principio/cierre del encabezado
<body> </body> Indica el principio/cierre del cuerpo de
la página
<p> </p> Indica el principio/cierre de un párrafo
<br /> Punto y a parte
<h1,2,3…> </h1,2,3…> Indica el principio/cierre de
encabezados ordenados por relevancia.
Son marcas que indican el principio y el fin de una estructura
Las etiquetas de cierre son iguales a las de apertura, pero van precedidas de “/”

ATRIBUTOS
ATRIBUTO FUNCIÓN
<alt> Proporciona un texto alternativo
cuando no se muestre la imagen
<bg color> Indica el color del fondo
<border> Indica el ancho del borde de la página
<color> Indica el color del texto
<img src> Indica la ruta de una imagen
Son valores que se añaden a las etiquetas para modificar su comportamiento
Van solo con la etiqueta de apertura

EDITORES DE TEXTO PLANO Y WEB
Editores de texto planos Editores de texto web
Bloc de notas
Notepad C++
Wordpad
Microsoft Office Word
A diferencia de los editores planos, los editores web pueden añadir etiquetas al
código que tú no has escrito.

ELEMENTOS BÁSICOS DE UN
DOCUMENTO HTML
ELEMENTO EXPLICACIÓN
DOCTYPE
Informa al navegador del tipo de
archivo
<html>
Indica que se va a utilizar HTML para
escribir la página
<head>
Es la parte de la página donde se escribe
el título y similares
<body>
Es la parte de la página donde se aloja
la mayoría del código
<meta charset>
Indica al navegador el tipo de
codificación de los caracteres

ELEMENTOS DE BLOQUE ELEMENTOS DE LÍNEA
ELEMENTOS DE BLOQUE Y DE LÍNEA
-Ocupan todo el ancho disponible
-Los elementos tras él se colocan
debajo
-Pueden contener otros elementos de
bloque y de línea
-Ejemplos: <p>;<table>;<ol>
-Ocupan solo el ancho necesario
-Los elementos se van alineando hasta
ocupar el espacio disponible
-Pueden contener sólo otros elementos
de línea
-Ejemplos: <strong>;<img>;<a>

ETIQUETAS BÁSICAS
ETIQUETA FUNCIÓN
<div>
Indica un bloque de contenidos
<u>
Indica un texto subrayado
<em>
Indica un texto en cursiva
<sub>
Indica un texto en subíndice
<sup>
Indica un texto en superíndice
<strong>
Indica un texto en negrita

ATRIBUTOS APLICABLES A CUALQUIER
ETIQUETA
ATRIBUTO DESCRIPCIÓN
id
Identifica una etiqueta concreta en todo
el documento HTML
class
Se usa para agrupar etiquetas bajo un
mismo estilo
style
Aplica un estilo a un elemento
title
Sirve para elaborar una descripción
corta de un elemento

LISTAS Y TIPOS
Son enumeraciones de elementos. Dentro de cada
elemento puede haber otra enumeración. Hay dos
tipos:
 Lista ordenada: los elementos se ordenan. En HTML
puedes usar varias maneras de ordenar (por
números (1,2,3), por letras (A,B,C), etc.
 Lista no ordenada: los elementos no van en orden.
Aquí, los elementos se ordenan por guiones, por
puntos, etc.

ENCABEZADOS
 Son textos especiales que se usan para crear títulos y
así distinguir secciones dentro de una página.
 Para definirlos se usa la etiqueta <h1,2,3…>
 Están constituidos de manera jerárquica, es decir, h1
se usa para títulos con mayor importancia que h2

TABLAS
 Son elementos que estructuran la información en
filas y columnas.
 Para definirlas se usa la etiqueta <table>. Además se
usan las etiquetas <tr> para las filas y <td> para las
celdas dentro de cada fila.
 También se pueden modificar otros aspectos como el
borde de la tabla.

IMÁGENES
 Para definirlas se usa la etiqueta <img>. Se usa
siempre con el atributo src que indica el directorio
donde se guarda la imagen.
 Se usa el atributo alt para proporcionar un texto
alternativo si la imagen no se puede mostrar.
 Se pueden modificar atributos como el ancho o la
altura con los atributos width y height
respectivamente.

ENLACES
 Son vínculos a otras páginas.
 Para definirlos se usa la etiqueta <a> seguido del
atributo href que indica la ruta a la página.

PERSONALIZACIÓN DEL
ESTILO: CSS

CSS: Significado y utilidad
CSS (hojas de estilo en cascada) es un lenguaje que se
usa para definir el modo de presentar el código HTML,
es decir, el estilo de la página.

FORMAS DE COLOCAR EL CÓDIGO CSS
Existen tres maneras principales:
-Con el atributo style

-Con la etiqueta <style>

-En un archivo independiente

SELECTORES BÁSICOS
Son modificadores que afectan a ciertos elementos y
que cambiarán sus propiedades. Tres tipos:
SELECTOR DESCRIPCIÓN
De tipo
La modificación afectará a todas las
etiquetas que sean del tipo de la
seleccionada.
De clase
La modificación afectará a todas las
etiquetas reunidas en una clase con el
atributo class
De id
La modificación afectará a un
elemento concreto; del que se
especifique su atributo id

COLORES
 Para modificar el color del texto se utiliza la
propiedad «color». Esto afecta al texto; si queremos
cambiar el color del fondo usaremos bg-color.
 Existen muchas maneras de definir un color. Las
más comunes son: por su nombre en inglés, por su
valor RGB o por su código hexadecimal.

TEXTO
Existen muchos modificadores que afectan a las letras
del texto
MODIFICADOR DESCRIPCIÓN
Text-align Alineación del texto
Text-decoration Subrayado, tachado, etc
Text-transform Cambios entre mayúsculas y
minúsculas.
Font-size Tamaño de la letra
Font-family Tipo de letra
Font-syle Aplica cursiva
Font-weight Grosor del trazo del texto
Text-shadow Sombreado

TAMAÑO
Puesto que dependiendo de si el elemento es de bloque
o de línea ocupará ciertas dimensiones, existen
herramientas CSS para cambiar la forma en la que el
navegador considera un elemento:
ELEMENTO DESCRIPCIÓN
display: block El elemento se comportará como
elemento de bloque
display: inline El elemento se comportará como
elemento de línea
display: inline-block El elemento se establece como bloque
pero se comporta como línea

BORDE
Se puede establecer un borde alrededor del documento
HTML. Se pueden establecer las siguientes
propiedades:
PROPIEDAD DESCRIPCIÓN
Border-width Establece el grosor del borde
Border-style Tipo de trazo. Línea continua, doble etc
Border-color Establece el color del borde
Border Es la propiedad genérica que permite
establecer las anteriores a la vez
Border-radius Radio de la curvatura que tiene el
borde en las esquinas del documento

MÁRGENES
Es el espacio que hay entre elementos. Dos
propiedades:
Margin Espacio entre un elemento y los
elementos que lo rodean
Padding Es el espacio interno entre un
elemento y su contenido

POSICIONAMIENTO
Es el lugar que ocupan los elementos en el espacio del
documento. Se puede modificar con la propiedad
position y un atributo:
ATRIBUTO DESCRIPCIÓN
Position: static El elemento ocupa la posición por defecto, es
decir, después del elemento anterior
Position: relative Desplaza la posición hacia una dirección
establecida a partir de la posición original
Position: absolute El elemento se sitúa en la parte superior
izquierda
Margin-top y margin-left Mueven el elemento
Position: fixed Igual que el absolute pero se utiliza la ventana
como referencia para la posición

IMAGEN DE FONDO
Para establecerla se usan 3 propiedades:
Bg-image Su valor será la ruta donde está la
imagen
Bg-position Establece la alineación de la imagen
Bg-repeat Si la imagen es más pequeña que el
elemento, se irá repitiendo hasta
llenar el espacio.

Lenguaje html y css

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (18)

Similar a Lenguaje html y css

Similar a Lenguaje html y css (20)

Último

Último (20)

Lenguaje html y css