Lenguaje html y css

LENGUAJE HTML Y CSS
Trabajo realizado por:
Ángel Ruescas Selva
y
Alberto Pérez Díaz

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

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?

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>

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” />

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

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>

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>

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>

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

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

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>

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

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

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

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

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

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

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

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%)

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

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)

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

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

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

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)

Lenguaje html y css

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (15)

Similar a Lenguaje html y css

Similar a Lenguaje html y css (20)

Último

Último (20)

Lenguaje html y css