Scribd
Cargar
71 vistas

HTML 5

El documento describe las etiquetas y atributos básicos de HTML5. Explica que las etiquetas indican el tipo de contenido y se encuentran entre corchetes angulares. Hay etiquetas en pares que se abren y cierran y etiquetas huérfanas que no requieren cierre. Los atributos complementan a las etiquetas para proveer información adicional. La estructura básica de una página HTML5 incluye las etiquetas <html>, <head> y <body>.

Cargado por

Estella Saleme Lugo
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
71 vistas

HTML 5

El documento describe las etiquetas y atributos básicos de HTML5. Explica que las etiquetas indican el tipo de contenido y se encuentran entre corchetes angulares. Hay etiquetas en pares que se abren y cierran y etiquetas huérfanas que no requieren cierre. Los atributos complementan a las etiquetas para proveer información adicional. La estructura básica de una página HTML5 incluye las etiquetas <html>, <head> y <body>.

Cargado por

Estella Saleme Lugo
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 22

HTML5

EJEMPLOS DE ABREVIATURAS EN HTML


ETIQUETAS Y ATRIBUTOS
Las páginas HTML están llenas de las llamadas etiquetas. Aunque estas etiquetas no
las pueden ver aquellos que visiten vuestro sitio, ellas permiten que el ordenador
entienda que es lo que tiene que mostrar.
Las etiquetas son fáciles de identificar. Están rodeadas por «corchetes angulares» en
otras palabras los símbolos < y >, como este: <etiqueta>
Indican el tipo de texto al que rodean. Quieren decir por ejemplo: «esto es el título de la
página», «esto es una foto», «esto es un párrafo».
Hay dos tipos de etiquetas: etiquetas en pares y etiquetas huérfanas.
Etiquetas en pares: Se abren, contienen texto y se cierra posteriormente. Ejemplo:

<p>Esto es un párrafo</p>
Etiquetas huérfanas
Estas son las etiquetas que se usan con más frecuencia para insertar un
elemento en un punto determinado (por ejemplo una imagen). No es
necesario definir el comienzo y el final de la imagen. Solo tenéis que
decirle al ordenador que «inserte una imagen aquí». Una etiqueta huérfana
se escribe así:

<img></code>
Atributos
Los atributos son como las opciones de la etiqueta. Las complementan para proporcionar
información adicional. El atributo se coloca después del nombre de la etiqueta que abre y
frecuentemente es un valor como este:

<NombreDeLaEtiqueta Atributos de la Etiqueta = “valor”>

¿Para qué sirve? Usando la etiqueta <imagen /> que se mostró anteriormente, por sí misma no
tiene mucha utilidad. Se puede añadir un atributo que indique el nombre de la imagen a mostrar:

<Img src = “foto.jpg”> </code>


El ordenador entonces entiende que tiene que mostrar la imagen que contiene el archivo
foto.jpg.
ESTRUCTURA BÁSICA DE UNA PÁGINA HTML5
El resultado que se obtiene cuando se copió dentro del sublime text se muestra en la
figura siguiente:
Las etiquetas se abren y se cierran en un orden específico. Por
ejemplo, la etiqueta <html> es la primera que se abre y también la
última que se cierra (al final del código con </html>). Las etiquetas se
tienen que cerrar en el orden inverso en el que se abrieron. Por
ejemplo:
<html><body></body></html>: correcto. Una etiqueta que se abrió
dentro de otra etiqueta también se tiene que cerrar dentro de esa
etiqueta.
<html><body></html></body>: incorrecto, las etiquetas están
entrecruzadas.
DOCTYPE
<!DOCTYPE html>
La primera línea se denomina eldoctype. Es fundamental porque indica
que esto es efectivamente una página web HTML. No es realmente una
etiqueta como las otras (empieza con un signo de exclamación) y se puede
considerar como una excepción que confirma la regla.
La Etiqueta HTML
1 <html>
2
3 </html>
Esta es la etiqueta principal del código. Incluye el contenido completo de la página.
¡Como podéis ver la etiqueta </html> de cierre está situada a la derecha del final del
código!
La cabecera <head> y el cuerpo <body>
Una página web se compone de dos partes:
La cabecera <head>: esta sección proporciona información general sobre la página
como su título, la codificación (para la gestión de caracteres especiales), etc. Suele ser
bastante corta. La información que contiene la cabecera no se muestra en la página y es
simplemente información general concebida para el ordenador. ¡Es muy importante!
El cuerpo<body>: es aquí donde se encuentra la parte principal de la página. Todo lo
que tecleemos aquí se mostrará en la pantalla. La mayor parte de nuestro código se
tecleará en el cuerpo.
La Codificación charset

<meta charset = “utf-8”> </code>

Esta etiqueta indica la codificación que se usa en el archivo .html.


La codificación especifica cómo se guarda el archivo. Es lo que determina
la forma en la que se van a mostrar los caracteres especiales (acentos,
caracteres japoneses y chinos, caracteres arábigos, etc.)
El título principal de la página
<title>
Este es el título de la página, ¡lo cual es probablemente el elemento más importante!
Todas las páginas tienen que tener un título que describe lo que contienen.
Es aconsejable que el título se mantenga bastante corto (normalmente menos de 100
caracteres).
El título no se muestra en la página sino en su parte superior (habitualmente en la
pestaña del navegador). Al guardar la página web y abrirla en el navegador. El título
se muestra en la pestaña como se ve en la figura siguiente.
Insertar un comentario
<!-- Esto es un comentario -->
Lo puedes poner en la parte que queráis en el código fuente, no afecta a la página,
pero se puede usar como ayuda.
GENERA EL DOCTYPE DE HTML5
<!DOCTYPE HTML>
<HTML LANG=”EN”>
<HEAD>
<META CHARSET=”UTF-8″>
<TITLE>DOCUMENT</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
+ -> GENERA UN HERMANO > -> GENERA UN HIJO
CÓDIGO: H1+P CÓDIGO: H1>A
RESULTADO: RESULTADO:
<H1></H1> <H1><A
<P></P> HREF=””></A></H1>

<DIV></DIV>
() -> AGRUPACIONES
*N -> NOS GENERA UNA CÓDIGO: (H1>A)+UL>LI*3
CANTIDAD DE UN ELEMENTO
RESULTADO:
N VECES
<H1><A
CÓDIGO: DIV*3
HREF=””></A></H1>
RESULTADO: <UL>
<DIV></DIV>
<LI></LI>
<DIV></DIV>
<LI></LI>
<DIV></DIV> <LI></LI>
</UL>
# -> GENERA EL ATRIBUTO ID EN UNA ETIQUETA
CÓDIGO: DIV#WRAPPER
RESULTADO:
<DIV ID=”WRAPPER”></DIV>

. -> GENERA EL ATRIBUTO CLASS EN UNA ETIQUETA


CÓDIGO: DIV.MENU
RESULTADO:
<DIV CLASS=”MENU”></DIV>
[X] -> GENERA EL ATRIBUTO X EN UNA ETIQUETA MÁS LOS
ATRIBUTOS PROPIOS DEL ELEMENTO
CÓDIGO: IMG[TITLE]
RESULTADO:
<IMG SRC=”” ALT=”” TITLE=””>

$ -> NUMERAR ATRIBUTOS DE UN ELEMENTO MÚLTIPLES VECES


CÓDIGO:
UL>LI.MENU$*5
RESULTADO:
<UL>
<LI CLASS=”MENU1″></LI>
<LI CLASS=”MENU2″></LI>
<LI CLASS=”MENU3″></LI>
<LI CLASS=”MENU4″></LI>
<LI CLASS=”MENU5″></LI>
</UL>
SI QUEREMOS QUE EMPIECE POR 001
CÓDIGO: UL>LI.MENU$$$*5
RESULTADO:
<UL>
<LI CLASS=”MENU001″></LI>
<LI CLASS=”MENU002″></LI>
<LI CLASS=”MENU003″></LI>
<LI CLASS=”MENU004″></LI>
<LI CLASS=”MENU005″></LI>
</UL>
EXPLICACIÓN: TANTOS $ COMO CARACTERES QUEREMOS AL
EMPEZAR.
@ -> MODIFICA EL ORDEN DE LA HERRAMIENTA $
CÓDIGO: UL>LI.MENU$@-*5
RESULTADO:
<UL>
<LI CLASS=”MENU5″></LI>
<LI CLASS=”MENU4″></LI>
<LI CLASS=”MENU3″></LI>
<LI CLASS=”MENU2″></LI>
<LI CLASS=”MENU1″></LI>
</UL>
{} -> GENERAR TEXTO
CÓDIGO: A{INICIO}
RESULTADO:
<A HREF=””>INICIO</A>

OTRO EJEMPLO DE A CON UN SPAN EN SU INTERIOR


CÓDIGO: A>{INICIO}+SPAN{PAGINA}
RESULTADO:
<A HREF=””>INICIO<SPAN>PAGINA</SPAN></A>
OREMN -> GENERAR TEXTO SIMULADO LOREM IPSUM DE N
PALABRAS
CÓDIGO: LOREM5
RESULTADO:
LOREM IPSUM DOLOR SIT AMET.

También podría gustarte