Este documento resume los conceptos básicos de HTML y CSS. Explica que HTML es un lenguaje de marcado utilizado para crear páginas web y no es un lenguaje de programación. Detalla las etiquetas y atributos de HTML así como la estructura básica de una página. También cubre elementos como encabezados, tablas, imágenes y enlaces. Finalmente, introduce CSS y cómo se puede usar para personalizar el estilo y diseño de páginas web.

1. HTML
Irene Blesa
Pascual Tornero

2. ÍNDICE
• 1. Lenguaje HTML
• 1.1. Significado de HTML y utilidad
• 1.2. ¿Por qué HTML no es un lenguaje de programación?
• 1.3. Etiquetas
• 1.4. Atributos
• 2. Estructura básica de una página HTML
• 2.1. Editores de texto plano y editores de documentos 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
• 2.5. Atributos globales aplicables a cualquier etiqueta: id, class, style, title
• 2.6. Listas y tipos

3. 
1.1. Encabezados
1.2. Tablas
1.3. Imágenes
1.4. Enlaces
2. Personalizacióndel estilo:CSS
2.1. Significadode CSSyutilidad
2.2. Formasde colocacióndel códigoCSS
2.3. Selectoresbásicos
2.4. Colores
2.5. Texto
2.6. Tamaño
2.7. Bordes
2.8. Márgenes
2.9. Posicionamiento
2.10.Imagende fondo
• 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
• 3.5. Texto
• 3.6. Bordes
• 3.7. Márgenes
• 3.8. Posicionamiento
• 3.9. Imagen de fondo

4. 1. LENGUAJE HTML
1.1. SIGNIFICADO DE HTML Y UTILIDAD
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 Formato
de Documentos para
Hipertexto.

5. 1.2. ¿POR QUÉ HTML NO ES UN LENGUAJE DE PROGRAMACIÓN?
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.
Es por ello que no puede definirse como un lenguaje de
programación, sino como un sistema de etiquetas.

6. 1.3. ETIQUETAS
Las etiquetas HTML son fragmentos de código que permiten
crear elementos HTML, estructuras básicas del lenguaje de
programación HTML en el que se escriben las páginas web
porque es el que entienden los navegadores.
Están encerradas entre corchetes angulares < >, y cada
elemento HTML tiene una etiqueta de inicio del tipo
<etiqueta> y suele terminar con una etiqueta de cierre
</etiqueta>

7. ALGUNAS ETIQUETAS:

8. 1.4. ATRIBUTOS
• Son valores adiciones que se agregan a una
etiqueta para configurarla o definir su
comportamiento.
• Se añaden a la etiqueta de apertura

9. 2. ESTRUCTURA BÁSICA DE UNA PÁGINA 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 >.
• La página acabará con < /HTML > .

10. 2.1. EDITORES DE TEXTO PLANO Y EDITORES DE
DOCUMENTOS WEB.
EDITORES DE TEXTO
Programas que nos pueden ayudar a la hora de construir
una página web. Técnicamente es un software para editar
y crear código HTML.
EDITORES DE TEXTO PLANO
Permiten crear y modificar archivos digitales
compuestos únicamente por textos sin
formato, por lo que necesitas conocer sus
etiquetas y su funcionamiento.
EDITORES DE DOCUMENTOS
WEB
El editor convierte todas las entradas
directamente en HTML o CSS, por lo
que puedes editar el código HTML en
el diseño del sitio web
correspondiente.

11. EJEMPLOS:
Writebox es un editor de texto multinavegador.
Writer es un editor de texto multinavegador.
Simplenote es un editor de texto en la nube muy sencillo y muy
rápido.
Google Docs es un editor de texto integrado dentro de Google
Drive.

12. 2.2. ELEMENTOS BÁSICOS DE LA ESTRUCTURA DE UN
DOCUMENTO HTML
DOCTYPE Es la primera etiqueta y la única que va en mayúsculas. Informa del tipo de archivo
que es.
<html> Se define justo después de DOCTYPE y contiene todo el documento.
<head> Es la primera parte del <html>, indica la información general sobre la página web
(contiene a la etiqueta <tittle>).
<meta
charset=“U
TF-8”>
Va incluido en <head> e indica el tipo de codificación de los caracteres que va
a utilizar el editor (es recomendable usar la codificación UTF-8).
<body> Va a continuación de <head> y es el contenido que mostrará la página.

13. 2.3. ELEMENTOS DE BLOQUE Y DE LÍNEA
o Elementos de línea
-Ocupan el ancho necesario
-Solo pueden componer dos
elementos de línea
-Pueden ser
<img><a><button>
o Elementos de bloque
-Ocupan todo el ancho
disponible
-Pueden contener otros
elementos
-Pueden ser
<p><div><ul><ol><table>

14. 2.4. ETIQUETAS BÁSICAS

15. 2.5. ATRIBUTOS GLOBALES APLICABLES A
CUALQUIER ETIQUETA: ID, CLASS, STYLE, TITLE
Los atributos globales son atributos comunes a todos los elementos
HTML; pueden usarse en todos los elementos, aunque pueden no
tener efecto en algunos.
id
Define un identificador único (ID) el cual debe ser único en
todo el documento.
class
Especifica uno o más nombres de clases de un elemento (se
refiere a una clase en una hoja de estilo).
style
Especifica una línea de estilo CSS de un elemento.
tittle
Especifica información adicional acerca de un elemento. Será
mostrada por un globo al poner el puntero encima.

16. 2.6. LISTAS Y TIPOS
LISTAS
DESORDENADAS
<ul>
No tienen una
numeración y no tienen
un orden establecido.
LISTAS ORDENADAS
<ol>
En las ordenadas los
elemento van
precedidos de una
numeracion
<ul>
<li>Elemento 1 de la lista</li>
<li>Elemento 2 de la lista</li>
<li>Elemento 3 de la lista</li>
</ul>
<ol>
<li>Elemento 1.1 de la lista</li>
<li>Elemento 1.2 de la lista</li>
</ol>

17. 2.7. ENCABEZADOS
Crean títulos para diferentes secciones y subsecciones.
Hay desde <h1> hasta <h6>, y necesitan un cierre.

18. 2.8. TABLAS
Elemento de bloque que se emplea para
estructurar una serie de datos alineados según
un esquema de filas y columnas
Se representa mediante <TABLE>, <TR>, <TH>,
<TD>

19. 2.9. IMÁGENES
•<img> elemento (en línea) básico.
Los atributos que se utilizan para tratar las imágenes son:
•src = “x” indica la dirección de la imagen.
•border, señala los píxeles del borde.
• width y height, indican el ancho y alto en píxeles.
•alt, ofrece un texto en caso de que no se cargue la foto.

20. 2.10. ENLACES
La etiqueta básica es <a> y se pueden referir
tanto a páginas locales como externas.
• Página en otro directorio:
dir/subdir/arch
• Uso de anclas:
<aname="nombreAncla">Comienzo</a>
• Referencia externa:
<ahref="http://www.sitio.com/ancla_en#S">Texto
sensible</a>

21. 3. PERSONALIZACIÓN DEL ESTILO: CSS
3.1. SIGNIFICADO DE CSS Y UTILIDAD
Lenguaje usado para la
presentación de html.
Nos permite personalizar
el texto, el fondo y
muchos elementos más
relacionados con el diseño
de la página.

22. 3.2. FORMAS DE COLOCACIÓN DEL CÓDIGO CSS
En un atributo HTML, con el atributo style permite un
diseño general que afecta a todo HTM
Con la etiqueta <style>
Añadir un archivo independiente a partir de un
archivo externo

23. 3.3. SELECTORES BÁSICOS
SELECTORES
Selectores id
Selectores de
tipo
Selectores de
clase
Está definido como una
lista de elementos
separados por espacio, y
uno de esos elementos
debe coincidir
exactamente con el
nombre de clase dado
en el selector.
Buscan un elemento
basado en el
contenido del atributo
id. El atributo ID del
elemento seleccionado
debe coincidir
exactamente con el
valor dado en el
selector.
Afecta a todos los
elementos del mismo
tipo, como puede ser
los enlaces <a>.

24. 3.4. COLORES
Para cambiar el color del texto utilizamos
color
Para cambiar el color del fondo
background-color
Podemos elegir el color por el nombre o
mediante valores RGB

25. 3.5. TEXTO
Alineación del texto (text-align): left, right, center…
Subrayado (text-decoration): underline, none, overline, line-through...
Transformación
mayúsculas/minúsculas (text-
transform):
uppercase, lowercase...
Tamaño del texto (front-size): px, pt, %...
Tipo de fuente (font-family): serif, monospace…
Cursiva (font-style): italic.
Grosor del texto (font-weight): bold.
Sombreado (text-shadow): -4px 2px 5px grey.

26. 3.6. BORDES
Podemos poner un borde con border.
• Border-width. Añade grosor.
• Border-style. Tipo de trazo del borde.
• Border-color. Define el color del borde.
• Border. Establece las tres propiedades anteriores a
la vez.
• Border-radius. Hace referencia al radio de la
curvatura de las esquinas.

27. 3.7. MÁRGENES
Tienen dos propiedades:
Margin
Representa el
espacio elemento-
elemento, o entre
borde-elemento.
Padding
Representa el
espacio
elemento-
contenido.

28. 3.8. POSICIONAMIENTO
Position:static •Por defecto.
•Añade un salto de línea tras el elemento anterior.
Position:relative •Mediante las propiedades top, bottom, left y right podemos cambiar su posición
sin que influya al resto de elementos.
Position:absolute •Esquina superior izquierda del elemento.
•En una capa superior (su espacio queda libre).
Position:margin-top
Position:margin-left
•Permiten mover los elementos.
•Si le damos valores dejan de tener como referencia el elemento anterior y les
damos una posición referente a toda la página.
Position:fixed •Similar a absolute.
•Siempre visible (barras de herramientas).

29. 3.9. IMAGEN DE FONDO
• Background-image. Su valor es la ruta a la
imagen desde el directorio donde se encuentra el
archivo CSS.
• Background-position. Si la imagen es mas
pequeña que el elemento, esta propiedad
establece la alineacion vertical y horizontal de la
misma.
• Background-repeat. Si la imgagen es mas
pequeña que el elemento, se repetirá por defecto,
horizontal y verticalmente.

30. FIN