Introducción a HTML 5

1 .
¿ Qué es htm)5 ?

Es lenguaje Le dice al
un MARCADO -
navegador como
quieres
y qu quieres mostrar

SOLO HAY UN NODO PADRE

2
2 à cómo funciona ? IMPORTANTE POR ARCHIVO

. Htm/
recoge como es la estructura de la
página Y PARA ENTENDER MEJOR ARBOL
MEDIANTE UNA ESTRUCTURA DEARBOL
>
MIRA EJEMPLO CÓDIGO
-

DE
>
- NODO PADRE

NoDO Hiso
>
-

>
- NODO HIJO

dd)

+ NODOS HIJOS

APLICACIÓN REAL ESTRUCTURA ÁRBOC :

· El código a través etiquetas (lenguaje marcado)

de

< htm( > NODO PADRE

'

NODO HIJO
< heads
< titles mi
primera página <Itifle) Otro NODO HIJO EJEMPLO BÁSICO PARA COMPRENDER
dentro del hijo principal
ssheads · ESTRUCTURA ARCHIVO HTML

(bodys · PATRÓN DISEÑO/ ESTRUCTURA EN ÁRBOL

(contenido visible para el usuasio (
<
/body L
< /htm/

o SIGUIENTE PÁGINA AMPLIDMOS + DETALLES

(DE 10 GENERAL AL DETALLE

l
EJEMPLO CON MÁS CÓDIGO

indicas el tipo de contenido que estás escribiendo

al
Navegador
DÖCTYPE HTML →
(si NO LO PONES) -
Entra en Quirks mode interpretando el código
con erores sintaxis antigua
h+ m) "esp
=
y
long =

indicamos el idioma

shead > convención de carácteres

que usaremos
↑ "Para que el
navegador lo entienda
< meta charset =
"UTF-8" (

< meta name =

"Viewport' content "width initial-
=
,
scale =
1 . 0 indica la vista portable y escala por defecto

titlel
< Mi
primera página /titles Nombre de la
pestaña de la página web

/head >
En este bloque añadimos casaterísticas
a la
página no visibles para el usuario

…
> body > ·

& Atajo
contenido de la para el usuario
Vscope
página visible para

Ibody > ↓. + entel =

código base htm)

/htm)
< >

SIGUIENTES PUNTOS :

←
body básicas
Etiquetas
≠
· Estructura de una etiqueta . Contenido de
_

.
 ETIQUETAS MARTES

tener atributos
*
· Una etiqueta : (APERTURA
puede

Es Jhtm) lang "en"

=
, podemos asignar clases (css) , id ( Javascript) identificar elementos

Atributo
Todo atributos, de
son
ejemplos algunos de ellos .

ETIQUETAS BÁSICAS

Ch1 /h1 HEADING - Son usados

por los motores de búsqueda para indexar el contenido

(Hay Vallos tamaños 11-46) Solo usarlo para títulos

,
NO RESALTAR COMENIDO

.
2 <PL < /p > Pairafo - Podemos escribir contenido

EXEMPLO : (En Valias Cineas) OUTPUT

EJEMPLO :

sps
Hola OUTPUT >
[p Hola mamá ! < /PL
Hola mamá !
mana
!
¿ Qué tal estas Hola mamá ! ¿ Qué tal estás ? < pl ¿ Que talcetás ?< /PL ¿ Quétal estás ?
4p)

.
3 Para separar texto secciones de la ChrL
o
página NO TIENE ETIQUETA DE CIERRE

Y
. Para dejas comentarios NO APARECEN EN WEB . En algunos exploradores podemos ve los comentarios viendo el código con la dev tool .

- (Apectura No lo muestra al usuario

- -
> (Cierre (

EJEMPLO

}
USO :

/spanl identificador" dentro manipular la parte referenciada

(span) para "cleal
.
5 < se usa un
.

de otra
Añadirle estilo css
etiqueta
·
·
.

·
Referenciallo con otro contenido en la página .
etc

.
6 Crear saltos de Línea

Puedes usaulo en ps con mucho contenido < br > NO TIENE ETIQUETD DE CIERRE

y forzar ese salto o saltos delínea.

 7
. ETIQUETAS HIPERVINCULO

Para saltar de una

página otra misma Existen
o
navegar por una
. a :

Propiedades : (-blank) abrirá en una nueva pestaña el vínculo o

página

ES HIPERVINCULO La href "URL

= COMPLETA DEL SITOWEB Ir a
google /a) Chref = "x =

) para poder linkear alguna página web

Propiedad (links)

target "- blank" hrel

"

x(a)
*
uso: (a = = x L (rax

2 ¿ Cómo
. insecto
imágenes ? USO:
Puedes insectar la ruta link

img
*
< + indica no necesitará el cierre de etiqueta ·
<
img src = "X (
archivo
>
- Ruta Loca (Carpeta o en

sé el ancho
manipulamos 400
pondrá
el alto a 400 (mantendrá la relación entre ambos
· <
img srs = "x"Width = "4001

·
Podemos forzar el tamaño en x momentos propiedad para redimensional en
img 400
wth =
"
->
pixeles
ANCHO
usando embas
propiedades

NOTAS PARA DUDAS :

"Opinión" >
- Decir atributo
_
o propiedad a nivel técnico propiedad Referencia DOM Javascript

Y
Es lo más correcto
para hablar sobre html (son parecidos ,
no son lo mismo

Ampliación - En Las
para
añadir enlaces existe La
targetzblank rel'x r a x sal

>
- Al posicionante enuma saldrá

#1 - Recuadro con lo
que hayas escito
 ETIQUETAS AVANZADAS

¿ cómo interactuar con el usuario info de el ?

y recoger

1 . FORMULARIOS

< Form > Para

configuras formulario Identificador para
> ESTRUCTURA
< form(
- centras el seleccionado

< /form) . Mencional

1 dato a solicitar
Cabe . hombre /Label

1
Nombre
Aunque nos equivoquemos
< in put id "nombre /
=

.
2 Para introducir el dato - dicando , nos Lleva a

referencia id usado.
< /form) hace
'
ese
escribir
.
3 Que seleccione el campo a rellenar para

Propiedad

t Propiedad para input

1 . Ide Identificador
SEROBSETO L
FORMULARIO
interpretará los datos
"

> El servidor
:
2 .
name と
y
CLAVE-> VALOR
formularco por el nome
_

>
- contenido = valor del
Clave

.
3 Placeholder >
parecido a Label, indica
que dato
insectar en input.
Hay vasios valores

emai (
-

4
. type "a (Se comportará diferente dependiendo
= del valor
que contenga escribes

}
-

password (oculta lo que

> "submit" > será botón (manda todos valores donde

(botón
un
radio seleccionable
-

>
- "text" >
-
Campo tenga dicho form (
_

-checkbox (cuadrado con tick I

valor por defecto de type
¿ De qué mancia ?
file
"
→
"
-

( para subir acchivos (

·
(form action = ruta" method =

GET - a traves del URL (255 carat)

d
donde manda la info ROST - ¿? NO ES SEGURO
J manda datos

manda a las cabeccas

< textanea
.
Id = X name = x
placeholden =
1) · para mandas datos mejor usar certificados
que encripten dichos datos
de texto

,cols
>
-
caja
para ajustas tamo
o

valo
t value delecto
= por T
paca mput
'
O VDUDO CON TEXTARE の

L Antes de la etiqueta ciere

--
4 testalea >

Se convertirá en valor por defecto

 .
2 BOTONES

· <input type "submits

=
, no puedes añadir etiquetas dentro

NO ES TAN PERSONALIZABLE

Button type = por defecto dentro de

form declarado " submitt

.
1 Importante siempre definir el tipo
13 posibles valores) X

.
1 Button - debemos añadir comportamiento con JS

formulario donde indiquemos (indicado action =

methodGE/PT
ruta
2 .
Submit - Enviar el le

Reset defecto
3
3 y Dejará todo con los valores por

más opciones de
C .

personalización

"button' img =X /L Botón que contiene

*
Es : (button t xe = src una
imágen

. LISTAS
3

1. L <luL , lista no ordenada

1 1 ESTRUCTURA
. LISTA NO ORDENADA → · Elemento 1

く ω3
· Elemento 2

(lis Elemento 1 < (i) Elemento 3

1
·

OUTPUT
< li) Elemento 2 < li]

Lis Elemento 3 il

< 0( >

2
2 Lo l /0LL , Lista ordenada

. . 1
2 ESTRUCTURA

< OCS

1
(lis Elemento 1 < (i) la única
diferencia :

< li) Elemento 2 < li]

.
1 Elemento 1
Lis Elemento 3 il
y incrementa segúntems haya
.
2 Elemento 2

clols 3 Elemento 3
3
 11 . . 3 Acciones que podemos hace

value =
*
Listas ordenadas : indicar desde valor empieza X
.
que =

·
Anidar Listas

EJ :

1 OL 3
(lis Elemento 1 < (i)

< li) Elemento 2 < li]

ccis 。 Atributo VALOR

ー
col lower-alpha , (1 2 3) será (a b c
EuElemento style =
list-style-type : la lista anidada , , , , ..

L/li
· ,
d

Si Elemento 2 /li hay +

opciones
de valor
< lols (mirar lista opciones (
aloks

4 .
TABLAS

Fila cabecela
Etiqueta <table >
stablel
e
·

Ctrl-row Producto Precio

Preao
(trL
HEATHER
(footer
cabecera) X Gratis
Procducto
- columnas ith

ths (Cabecea)
ne filas
thytd generarán columnas I tr >
<

{
,

celda
(podríamos telminar con más ( + r)

cabeceas
Elemento standard en celda
celdas que
si

{
,

no estamos atentos (
Ltdl gratis < Itd) >
一
一