Presentación Powerpoint HTML

Significado de HTML y utilidad
 HTML 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.

¿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

Etiquetas
 Una etiqueta HTML es aquello que
vemos entre corchetes angulares en
el código de nuestra web.
 Casi todas las etiquetas deben
“encerrar” el contenido al que afecta,
aunque no son el 100% de los casos.

Elemento Descripción
<doctype> Informa al navegador del tipo de documento del que se trata
<head> Incluye información general acerca del documento.
<title> Define el título de la página, el cual se muestra como título de la
ventana al abrir el navegador.
<body> Se añade a continuación de <head>. El contenido que se mostrará
al usuario deberá incluirse dentro del elemento body.
Ejemplo:

Uso de etiquetas
 <HR>
Dibujo de líneas horizontales
 <BR>
Escritura de contenido sin tener en
cuenta espacios en blanco
 <P>
Escritura de párrafos
 Comentarios
<!– Texto a escribir-->

ATRIBUTOS
 Son valores adiciones que se agregan
a una etiqueta para configurarla o definir
su comportamiento.
 Se añaden a la etiqueta de apertura
 Ejemplo con una imagen:
<img src=“imagen.jpg”alt=“imagen
de prueba”/>

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 > .

Tipos de elementos
 Elementos de bloque
-Ocupan todo el ancho disponible
-Pueden contener otros elementos
-Pueden ser <p><div><ul><ol><table>
 Elementos de línea
-Ocupan el ancho necesario
-Solo pueden componer dos elementos de
línea
-Pueden ser <img><a><button>

Etiquetas Básicas
 División<div>
 Párrafo<p>
 Agrupar elementos en línea<spam>
 Subrayado<u>
 Subíndice<sub>
 Salto de línea<br>

Listas y tipos
Numerada u ordenada <OL> <LI>
No ordenada <UL> <LI>
Listas de glosario o de definición
<DL> <LI>
Menús <MENU> <LI>
Listas de directorio <DIR> <LI>

Cabecera
 Está delimitada por las etiquetas < HEAD >
y </HEAD >
 Sus componentes son opcionales. El más
importante es <TITLE> ,permite escribir el
título del documento.
 El título no se muestra en la página, sino en
la parte superior de la ventana del
visualizador.
<HEAD><TITLE>Título del documento
HTML</TITLE></HEAD>

Tabla
 Elemento de bloque que se emplea para
estructurar una serie de datos alineados
según un esquema de filas y columnas
 <TABLE>, <TR>, <TH>, <TD>

Imágenes en HTML
<img src=“image001.gif">
 <IMG>
 Tiene que estar en un archivo separado
 Ejemplos de tipo de archivo: BMP, GIF,
JPEG, XPM, XBM, PNG, TIFF,

Enlaces hipertexto en
HTML
 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>

Personalización del
Estilo(CSS)
 Son botones son una parte fundamental
de nuestra web
 Deben saber llamar la atención al
usuario sin ser excesivamente molestos,

Colocación 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

Selectores básicos
 Selectores por tipo: Establece un estilo por
defecto a los elementos de una página.
a [color: Green;]
 Selectores de clase: Representa una clase
añadida a uno o varios elementos HTML
clase1 [color: Blue;]
 Selectores de id: Corresponde al nombre del
identificador de un elemento.
#id1[color: Red;]

Colores
 Para modificar el color del texto, se
utiliza la propiedad color.
 Para modificar el color de fondo del
elemento se utiliza background-color.

Algunos métodos que establecen valor
cromático son:
 Nombre del color: Blue, red, orange…
 Proporción de cada valor RGB en
-decimales, de 0 a 255: rgb(255,0,0)
-porcentajes: rgb(100%, 0%, 0%)
-código hexadecimal precedido de
almohadilla: #FF0000
-más de un valor de 0 a 1 (alpha) que
indica la transparencia del color:
rgba(255, 0, 0, 0.5)

Texto (propiedades)
 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.

Tamaño
Se pueden establecer las siguientes
propiedades:
 Display: block. Es un divisor <div> o
parrafo.
 Display: inline. Es un elemento en linea.
Si se aplica a varios <div> seguidos, se
situan el uno junto al otro.
 Display: inline-block. Se establece como
un bloque y se comporta como un
elemento en linea.

Bordes
 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.

Márgenes
Tienen dos propiedades:
 Margin. Representa el espacio elemento-
elemento, o entre borde-elemento
 Padding. Representa el espacio
elemento-contenido

Posicionamiento
 Position: static; Despues de cada
elemento realiza un salto de linea.
 Position: relative. Ocupa el mismo
espacio que si fuera static, pero se
puede desplazar su posición.

 Position: absolute. El elemento se situa
en la esquina superior izquierda del
elemnto que lo contiene.
 Margin-top y margin-left. Permiten
mover un elemento.
 Position: fixed. Es similar a absolute,
pero ultiliza la ventana ,y no el
documento para situarse.

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 img es mas
puequeña que el elemento, se repetirá
por defecto, horizontal y verticalmente.

Presentación Powerpoint HTML

Más contenido relacionado

La actualidad más candente

Similar a Presentación Powerpoint HTML

Último

En este documento

Presentación Powerpoint HTML