El documento describe los lenguajes HTML y CSS. Explica que HTML se utiliza para estructurar el contenido mediante etiquetas, mientras que CSS se usa para dar estilo y diseño a las páginas web. Luego detalla los elementos básicos de HTML como etiquetas, atributos, listas y tablas, y cómo crear la estructura de una página. Finalmente, cubre los conceptos y propiedades fundamentales de CSS como colores, fuentes, bordes, posicionamiento y fondo de imagen.
1. LENGUAJE HTML Y CSS
Trabajo realizado por:
Ángel Ruescas Selva
y
Alberto Pérez Díaz
2. GUIÓN
1.0 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.0 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
2.7 Encabezados
2.8 Tablas
2.9 Imágenes
2.9 Enlaces
3.0 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 Tamaño
3.7 Bordes
3.8 Márgenes
3.9 Posicionamiento
3.10 Imagen de fondo
3. 1.1 SIGNIFICADO DE HTML Y UTILIDAD
HTML significa lenguaje de marca de hipertexto
Es un conjunto de etiquetas predefinidas que el navegador
web
interpreta a la hora de construir una pagina
Carece de las estructuras de control y la toma de decisiones
1.2 ¿Por qué HTML no es un lenguaje de
programación?
4. 1.3 ETIQUETAS
Definida por los simbolos < y > , en minusculas.
Las etiquetas iternas deben incluir el simbolo / ,precedido
de un espacio.
Párrafo: <p> contenido del parrafo </p>
Salto de linea: <br/>
Párrafo con contenido en negrita: <p> Texto normal y <strong>
texto en negrita. </strong></p>
5. 1.4 Atributos
Son valores adicionales que se agregan a una
etiqueta.Existen atributos propios y exclusivos
Los atributos se añaden a la etiqueta de apertura , nunca a
la de cierre
<img> insertar una imagen
Src archivo que contiene la imagen
Alt mostrar un texto alternativo
<img src=“imagen.jpg”alt=“Imagen de prueba” />
6. 2. ESTRUCTURA BÁSICA DE UNA
PÁGINA HTML
2.1EDITORES DE TEXTO PLANO Y
EDITORES DE DOCUMENTOS WEB
Texto plano: Formato de contenido que solo
incluye caracteres imprimibles
Para editarlos se usan procesadores de texto
Convenientemente que resalte el HTML
destacando etiquetas y atributos frente al texto
7. 2.2 Elementos básicos de la estructura de
un documento HTML
DOCTYPE: informa al navegador del tipo de archivo que
se trata.Se escribe en mayúsculas
<html>:elemento raíz que contiene todo el documento
<head>:aparece en el interior de <html>, dentro de el se
incluye información general sobre la pagina web
<meta charset=“UTF-8” />: le indica al navegador el tipo
de codificación de los caracteres
<body>:va a continuación de <head>
8. 2.3 Elementos de bloque
Ocupan todo el ancho disponible
Los elementos tras un elemento de bloque se
situan debajo de este
Pueden contener otros elementos de bloque y en
linea
Ejemplos: <p> <div> <ul> <table>
9. 2.3 Elementos de línea
Ocupan solo el ancho necesario
Los elementos en linea se situan juntos hasta
ocupar el ancho posible
Pueden contener otros elementos en linea texto e
imágenes
Ejemplos: <img> <a> <button> <strong>
10. 2.4 Etiquetas básicas
División(<div>):permite dividir la pagina en secciones
Párrafo(<p>):solo puede englobar elementos en línea
Agrupar elementos en línea(<spam>): agrupa textos y otros
elementos en línea
Subíndice(<u>):el texto seleccionado aparece en un menor
tamaño y desplazado hacia abajo
Salto de linea(<br>):fuerza un salto de linea en el texto
11. 2.5 Atributos globales
Son aplicables a cualquier etiqueta
No hay que incluirlos todos sino solo los
necesarios para modificar el comportamiento de
la etiqueta
Se añaden solo a la de apertura nunca a la de
cierre
12. 2.6 Listas y tipos
Engloba un conjunto de elementos, existen dos tipos:
Los elementos que componen las listas se representa con la etiqueta
<li>
Listas desordenadas: no mantienen ningún orden concreto
Listas ordenadas: si establece un orden concreto. Se representa
con la etiqueta <ol>, admite varios atributos como
reversed,start,type.
Lista anidada: son listas internas en el interior de otra lista
principal, se tienen que cerrar con la etiqueta <li>
13. 2.7 Encabezados
Parrafos especiales para la creacion de titulos
Definidos por <h1> y <h2>
<h1> para el encabezado de mayor nivel y <h2>
sera un poco mas peuqeño
14. 2.8 Tablas
Elemento de bloque que se emplea para
estructurar una serie de datos alineados según
un esquema
Sus filas se representan con : <tr> y estas solo
conceden celas o <td>
Todas las filas tienen el mismo numero de celdas
Se utiliza el atributo border para la separacion
de las celdas
15. 2.9 Imágenes
Son elementos en linea
Se representan con la etiqueta <img> sin cierre
En caso de ser una imagen externa:
Imagen en el subdirectorio img: img/imagen.jpg
Imagen en el directorio anterior: ../imagen.jpg
Imagen en un servidor externo:
http://dominio.com/ruta/imagen.jpg
Se utilizara width y height para establecer el ancho y
el alto en pixeles
16. 2.10 Enlaces
Son vinculos a otras paginas locales o externas
La etiqueta que utliza es <a> y engloba a un
texto o una imagen como enlace a una ruta
especifica
Sus atributos son href para incluir una ruta,
target y _blank para indicar al navegador que
abra un enlace
17. 3.1 Significado de CSS y utilidad
• Lenguaje utilizado para definir el modo de
presentacion de HTML
• Permite separar la estructura de un documento
su diseño o su presentacion
18. 3.2 Formas de colocación del código CSS
Existen 3 formas de vincular el codigo CSS al
HTML
El atributo HTML , con el atributo style:
Se puede incluir en cualquier etiqueta
Las instrucciones se separan con el punto y coma
Con la etiquta <style>:
Permite establecer un diseño general
Se suele incluir en la cabecera
En un archivo independiente:
Se situa en un directorio diferente al del HTML
19. 3.3 SELECTORES BÁSICOS
Selectores por tipo:Se escribe solo el nombre de la
etiqueta HTML y afectaran a parrafos y enlaces
Selectores de clase:Su nombre debe ir precedido
de un punto (.) y mediante el atributo class sus
modificaciones afectaran a todos los elementos
Selectores de id:Corresponde al nombre del
identificador de un elemento con el atributo id
20. 3.4 Colores
Para cambiar el color es con la propiedad color
mientras que para el fondo es con background-
color.
Los valores del color se definde en el formato
(RGB)
Proporcion del color en hexadecimal:#FF0000
Proporcion del RGB en decimales: rgb(255,0,0)
Proporcion del RGB en porcentajes rgb(100%,0%.0%)
21. 3.5 Texto
• Alineacion del texto:Los valores mas comunes son left(a la
izquierda) right(a la derecha)center(en el centro)y
justify(justificada)
• Subrayado: Underline-none(quita la propiedad del subrayado)
(encima del texto)line-through(tachado)
• Text-transform:
uppercase(mayuscula)lowercase(minuscula)capital(la primera en
mayuscula)
• Tamaño del texto:px(pixel)pt(puntos)%(por ciento)
• Tipo de fuente:seriff o monospace(aplican la fuente por defecto)
• Cursiva:italic(texto en cursiva) y normal(retira la propiedad
anterior)
Grosor del texto:bold(transforma el texto a negrita) y normal (la
elimina)
• Sombreado:El primer numero al valor de la derecha y el segundo
a la izquierda
22. 3.6 Tamaño
Por defecto ocupan todo el ancho disponible
La anchura y la altura se pueden establecer con
el CSS
Display :block.se comporta como un elmento
divisor(<div>)
Display:inline.se comporta como un elemento en linea
<div>
Display: inline-block.se establece como un bloque pero
se comporta como un elemento en linea
El tamaño viene definido por el ancho(widht) y
alto(height)
23. 3.7 Bordes
border-witch:Añade grosor al borde en pixeles
border stylus:Se dibuja el borde con solido(linea
seguida)clashed (dicontinua)
border color:define el color del borde
border:Permite establecer las 3 anteriores a la
vez
Border radius:Hace referencia al radio de
curvatura
24. 3.8 MÁRGENES
Dispone de dos propiedades:
Margin:es el espacio entre un elemento y los elementos que lo rodean
Padding: es el espacio entre un elemento y su contenido
Se pueden utilizar los sufijos: -left, -right, -top y -bottom
25. 3.9 Posicionamiento
Static:Realiza un salto de linea para incorporar
un elemento
Relative:Ocupa lo mismo que si su valor fuera el
de static
Absolute:Se situa en la esquina superior
izquierda
TopPermite mover un elemento
Fixed:Es similar al absoluto
26. 3.10 IMAGEN DE FONDO
Se utilizan 3 propiedades:
Background-image: su valor será la ruta a la imagen
desde el directorio de donde se encuentra el archivo CSS
Background-position:si la imagen es mas peqeuña se
establece alineacion vertical y horizontal ;para la
alineacion horizontal;left(izquierda),center(centro) o
right(derecha),y la alineación
vertical;top(arriba),center(centro) o bottom(abajo)
Background-repeat:si la imagen es mas pequeña se
repetira el paso anterior hasta que sea igual al espacio
disponible; modificable con los valores: no-repeat,
repeat-x( eje horizontal) o repeat-y(eje vertical)
