SlideShare una empresa de Scribd logo
Etiquetas para
Textos
<h1>
La etiqueta de encabezado H1 y sus
hermanas pequeñas son una de las
herramientas más potentes para decirle
a los buscadores cual es la importancia
del contenido de nuestra página web.
Qué es la etiqueta
h1 (y qué no es)?
h1 es una etiqueta que sirve para colocar la
frase que indica el título del contenido de
una página web. Importante en este punto
delimitar de forma clara la diferencia entre
sitio web y página web: un título h1 debe
hacer referencia a una página de tu sitio web,
y no al sitio web en general.
La segunda de las conclusiones es que si resume el
contenido de una única página, tu sitio web completo
deberá tener un h1 para cada uno de los documentos,
que resuma el contenido de la misma de la forma más
específica posible. Un caso de mal uso para esta norma
son aquellos sitios web donde el h1 está dedicado en
todas las páginas al nombre de la compañía.
Como título que es lo lógico es que tu
titular h1 aparezca cuanto más arriba de
la página mejor, tal cual lo haría el título
de una noticia en una web. confiere
mayor importancia al contenido situado en
el primer tramo de un documento web, y
también para el usuario es lógico encontrar
el h1 en esa posición.
Qué es la etiqueta
h2 (y qué no es)?
La etiqueta h2 es un elemento similar al h1, que indica
títulos de importancia para subsecciones del
documento web actual. Por su naturaleza, puede haber
varios h2 en un sitio, que indiquen los diferentes títulos
de importancia de la página en la que nos encontramos.
No debemos confundir los h2 con herramientas
para colocar títulos en las zonas de nuestra página:
“Últimas noticias”, “Contáctame”, ”Zona de usuario”,
“Páginas amigas”, “Bienvenido a mi web”… son
títulos genéricos para bloques de una web, pero
que nada tienen que aportar al contenido.
Qué es la etiqueta
h3,h4… (y qué no es)?
Las etiquetas h3 en adelante nos permiten definir
títulos de subapartados de un bloque encabezado
con un h2. Su incidencia en SEO es más limitada,
y por ello no es habitual ni recomendable el
trabajar los titulares a partir de h4.!
Quitar todos los elementos restantes de tu sitio
web y dejar sólo los titulares deberían en la
mayoría de los casos dar una idea del contenido
de tu página, tal cual lo hace un índice en un
libro: las etiquetas de encabezado deben
describir la estructura del artículo.
La etiqueta <br>, no
se tiene que cerrar?
la verdad es que todas las etiquetas se pueden cerrar
perfectamente, pero no estamos obligados a hacerlo,
dado que HTML es un lenguaje bastante abierto y los
navegadores permiten mostrar código con algunos
errores o fallos de codificación sin que estos se vean
reflejados en el aspecto de nuestra página.
<b> o <strong>?
Cualquiera de las dos etiquetas sirven para colocar un
texto en negrita pero strong es la que más reconocen
los buscadores como
<span>
La etiqueta <span> se utiliza
para añadir estructura a una
parte de un texto.!
!
Esta etiqueta se usa
comúnmente para añadir un
estilo determinado dentro de una
sección del texto.
<p>RGB: <span
class="rojo">Red</
span>,<span
class="verde">Green</span>,!
<span class="azul">Blue</
span>.</p>!
<i>
Transforma el texto en itálica
<blockquote>
La etiqueta blockquote se escribe gracias a la
apertura <blockquote> y a su cierre </blockquote>.
Todo lo que esté dentro de está etiqueta estará sujeto a
su acción. El blockquote se usa para escribir una cita
textual o un párrafo exacto y que éste se diferencie del
resto del texto. El efecto que nos muestra es que crea
unos espacios a la derecha y a la izquierda del texto,
para que se diferencie de los demás.
<cite>
La etiqueta <cite> contiene una cita o referencia a otro
lugar.
<tt>
son las iniciales de “teletype”. Utilizando
esta etiqueta conseguiremos un
espaciado simple entre las diferentes
letras del texto. Abriremos la etiqueta
con <tt> y la cerraremos con </tt>
<big> y <small>
Cada vez que escribamos una etiqueta, haremos el texto
un punto más grande. Pero estas etiquetas también la
podemos combinar, por lo que si escribimos dos veces
la etiqueta <big>, haremos crecer la palabra dos puntos.!
!
Un ejemplo sería el siguiente:!
!
Esta palabra se va a escribir <small>pequeñita</small>,
esta se va a escribir <big>más grande</big> y ésta
<big><big>más grande aún</big></big>.!
!
Esta palabra se va a escribir pequeñita, esta se va a
escribir más grande y ésta más grande aún.!
<sub> <sup>y
Gracias a estas etiquetas podemos escribir
cualquier formula matemática como esta: H
<sub>2</sub> O o números elevados a
potencias 7<sup>3</sup>.!
!
Gracias a estas etiquetas podemos escribir
cualquier formula matemática como esta: !
!
H 2
O o números elevados a potencias 7
3
.!
Etiqueta <body>
la etiqueta body también podemos personalizarla para
darle el aspecto que nosotros deseemos
Color de fondo: bgcolor
El primer parámetro que debes conocer es el del color
de fondo, el "bgcolor". A través de este parámetro
podremos definir el color de fondo que queramos que
tenga nuestra página. Un ejemplo muy simple es el
siguiente: Si queremos que nuestra página quede con
un fondo rojo deberemos escribir:!
<body
bgcolor="#FF0000"></
body>!
Imagen de fondo: background!
Puede que no quieres que tu página tenga un
color sólo de fondo, sino que quieras que tu
página tenga una imagen. En ese caso
deberás indicarlo con la etiqueta "background".
La etiqueta quedaría de la siguiente manera:!
<body background="URL">
</body>!
Color de texto: text
Una vez tenemos el fondo definido, tendremos que
predefinir ahora el color del texto de nuestra web.
Es decir, tendremos que decirle al navegador de
qué color queremos que sea nuestro texto. Esto lo
definiremos con el parámetro "text".
!
Como ejemplo vamos a poner que queremos que
nuestro texto sea en negro, con lo que
escribiremos lo siguiente:
<body text= "#000000"></body>
Márgenes: leftmargin,
topmargin, rightmargin y
bottommargin
Si queremos que nuestros márgenes sean de 10
píxeles por todas partes escribiremos lo siguiente:!
<body leftmargin="10px"
topmargin="10px"
rightmargin="10px"
bottommargin="10px"></body>!
Color de links:
link, alink y vlink
En body también podemos ( y de
hecho debemos hacerlo) definir el color
de los vínculos de nuestra páginas,
definir el color con el que se mostraran
los links. Aquí debemos diferenciar tres
tipos de instrucciones: Debemos definir
el color del link (con la etiqueta "link"),
el color del link activo (con la etiqueta
"alink") y el color del link ya visitado
(con la etiqueta "vlink").
si queremos que nuestra página tenga
un color de enlaces (de links) de color
rojo y que esos enlaces sean rojos
cuando estén activos y se queden en
azul cuando estén inactivos deberemos
escribir lo siguiente:!
<body link= "#FF0000" alink=
"#FF0000" vlink= "# 0000FF"></body>!

Más contenido relacionado

La actualidad más candente

Html basicccccccoooooooooooooo
Html basicccccccooooooooooooooHtml basicccccccoooooooooooooo
Html basicccccccoooooooooooooo
Yo ♥ Tacna
 
Etiquetas Html Udp
Etiquetas Html UdpEtiquetas Html Udp
Etiquetas Html Udp
Anna García Sans
 
Presentacinhtml 091121100213-phpapp02
Presentacinhtml 091121100213-phpapp02Presentacinhtml 091121100213-phpapp02
Presentacinhtml 091121100213-phpapp02
David Alejandro González González
 
ETIQUETAS
ETIQUETASETIQUETAS
ETIQUETAS
alexiaiem
 
Conceptos básicos Html
Conceptos básicos HtmlConceptos básicos Html
Conceptos básicos Html
Raymond Marquina
 
Etiquetas para estructurar texto HTML5 - 2 parte
Etiquetas para estructurar texto HTML5 - 2 parteEtiquetas para estructurar texto HTML5 - 2 parte
Etiquetas para estructurar texto HTML5 - 2 parte
Wendy Navia Chambi
 
Etiquetas para estructurar texto en HTML - 4 parte
Etiquetas para estructurar texto en HTML - 4 parteEtiquetas para estructurar texto en HTML - 4 parte
Etiquetas para estructurar texto en HTML - 4 parte
Wendy Navia Chambi
 
Html apunte 2
Html apunte 2Html apunte 2
Html apunte 2
Mauricio Durán Torres
 
Introducion a HTML5
Introducion a HTML5Introducion a HTML5
Introducion a HTML5
Wendy Navia Chambi
 
Temas de html
Temas de htmlTemas de html
Temas de html
Elis Menbri
 
Etiquetas Diapositivas.
Etiquetas Diapositivas.Etiquetas Diapositivas.
Etiquetas Diapositivas.
asdi
 
Qué es html
Qué es htmlQué es html
Qué es html
edujoso
 
Crear una página básica en HTML
Crear una página básica en HTMLCrear una página básica en HTML
Crear una página básica en HTML
Secretaria Educacion Dptal
 
Codigos HTML...paginas web
Codigos HTML...paginas webCodigos HTML...paginas web
Codigos HTML...paginas web
ABel Palma
 
PresentacióN Html
PresentacióN HtmlPresentacióN Html
PresentacióN Html
marcos0209
 
Etiquetas para estructurar texto en HTML - 3 parte
Etiquetas para estructurar texto en HTML - 3 parteEtiquetas para estructurar texto en HTML - 3 parte
Etiquetas para estructurar texto en HTML - 3 parte
Wendy Navia Chambi
 
Tutorial html
Tutorial htmlTutorial html
Tutorial html
Jos Joseph Lg
 
Primeraclase
PrimeraclasePrimeraclase
Primeraclase
danielagrouliez
 
Descripción de la sintaxis con la que se trabaja en el lenguaje html
Descripción de la sintaxis con la que se trabaja en el lenguaje htmlDescripción de la sintaxis con la que se trabaja en el lenguaje html
Descripción de la sintaxis con la que se trabaja en el lenguaje html
joraloca
 

La actualidad más candente (19)

Html basicccccccoooooooooooooo
Html basicccccccooooooooooooooHtml basicccccccoooooooooooooo
Html basicccccccoooooooooooooo
 
Etiquetas Html Udp
Etiquetas Html UdpEtiquetas Html Udp
Etiquetas Html Udp
 
Presentacinhtml 091121100213-phpapp02
Presentacinhtml 091121100213-phpapp02Presentacinhtml 091121100213-phpapp02
Presentacinhtml 091121100213-phpapp02
 
ETIQUETAS
ETIQUETASETIQUETAS
ETIQUETAS
 
Conceptos básicos Html
Conceptos básicos HtmlConceptos básicos Html
Conceptos básicos Html
 
Etiquetas para estructurar texto HTML5 - 2 parte
Etiquetas para estructurar texto HTML5 - 2 parteEtiquetas para estructurar texto HTML5 - 2 parte
Etiquetas para estructurar texto HTML5 - 2 parte
 
Etiquetas para estructurar texto en HTML - 4 parte
Etiquetas para estructurar texto en HTML - 4 parteEtiquetas para estructurar texto en HTML - 4 parte
Etiquetas para estructurar texto en HTML - 4 parte
 
Html apunte 2
Html apunte 2Html apunte 2
Html apunte 2
 
Introducion a HTML5
Introducion a HTML5Introducion a HTML5
Introducion a HTML5
 
Temas de html
Temas de htmlTemas de html
Temas de html
 
Etiquetas Diapositivas.
Etiquetas Diapositivas.Etiquetas Diapositivas.
Etiquetas Diapositivas.
 
Qué es html
Qué es htmlQué es html
Qué es html
 
Crear una página básica en HTML
Crear una página básica en HTMLCrear una página básica en HTML
Crear una página básica en HTML
 
Codigos HTML...paginas web
Codigos HTML...paginas webCodigos HTML...paginas web
Codigos HTML...paginas web
 
PresentacióN Html
PresentacióN HtmlPresentacióN Html
PresentacióN Html
 
Etiquetas para estructurar texto en HTML - 3 parte
Etiquetas para estructurar texto en HTML - 3 parteEtiquetas para estructurar texto en HTML - 3 parte
Etiquetas para estructurar texto en HTML - 3 parte
 
Tutorial html
Tutorial htmlTutorial html
Tutorial html
 
Primeraclase
PrimeraclasePrimeraclase
Primeraclase
 
Descripción de la sintaxis con la que se trabaja en el lenguaje html
Descripción de la sintaxis con la que se trabaja en el lenguaje htmlDescripción de la sintaxis con la que se trabaja en el lenguaje html
Descripción de la sintaxis con la que se trabaja en el lenguaje html
 

Similar a Etiquetas

Html doc. descargado (reparado)
Html doc. descargado (reparado)Html doc. descargado (reparado)
Html doc. descargado (reparado)
GEEKS - Ventas y Servicios
 
Html
HtmlHtml
Html
HtmlHtml
Códigos HTML Sede magdalena ortega de Nariño
Códigos HTML Sede magdalena ortega  de NariñoCódigos HTML Sede magdalena ortega  de Nariño
Códigos HTML Sede magdalena ortega de Nariño
samaraoviedom
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
Ana Lira
 
TUTORIAL DE HTML
TUTORIAL DE HTMLTUTORIAL DE HTML
TUTORIAL DE HTML
Javier El Harry
 
Clase 1
Clase 1Clase 1
Clase 1
sinaibucio
 
Como crear una pagina web
Como crear una pagina webComo crear una pagina web
Como crear una pagina web
carolinaduran45
 
Unidad 3
Unidad 3Unidad 3
Unidad 3
morchito03
 
Manual de-html
Manual de-htmlManual de-html
Manual de-html
UPT "JOSÉ FELIX RIBAS"
 
Guia de html 3 y 4 periodo
Guia de html 3 y 4  periodoGuia de html 3 y 4  periodo
Guia de html 3 y 4 periodo
Macepla822
 
Guia de repaso html11
Guia de repaso html11Guia de repaso html11
Guia de repaso html11
María C. Plata
 
Manual html
Manual htmlManual html
Manual html
Marcos Rozze
 
Estructurabasica
EstructurabasicaEstructurabasica
Estructurabasica
Fama Barreto
 
Guia html
Guia htmlGuia html
PresentacióN Html
PresentacióN HtmlPresentacióN Html
PresentacióN Html
Margarita T.
 
Producto 4
Producto 4Producto 4
Producto 4
LuisFernando2511
 
CODIGOS HTML.Magdalena ortega de nariño.
CODIGOS HTML.Magdalena ortega de nariño.CODIGOS HTML.Magdalena ortega de nariño.
CODIGOS HTML.Magdalena ortega de nariño.
natalycamilaipiacapo
 
institucion educativa la esperanza sede magdalena
institucion educativa la esperanza sede magdalenainstitucion educativa la esperanza sede magdalena
institucion educativa la esperanza sede magdalena
juniorcuellargomez
 
Html basico
Html basicoHtml basico
Html basico
Yo ♥ Tacna
 

Similar a Etiquetas (20)

Html doc. descargado (reparado)
Html doc. descargado (reparado)Html doc. descargado (reparado)
Html doc. descargado (reparado)
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Códigos HTML Sede magdalena ortega de Nariño
Códigos HTML Sede magdalena ortega  de NariñoCódigos HTML Sede magdalena ortega  de Nariño
Códigos HTML Sede magdalena ortega de Nariño
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 
TUTORIAL DE HTML
TUTORIAL DE HTMLTUTORIAL DE HTML
TUTORIAL DE HTML
 
Clase 1
Clase 1Clase 1
Clase 1
 
Como crear una pagina web
Como crear una pagina webComo crear una pagina web
Como crear una pagina web
 
Unidad 3
Unidad 3Unidad 3
Unidad 3
 
Manual de-html
Manual de-htmlManual de-html
Manual de-html
 
Guia de html 3 y 4 periodo
Guia de html 3 y 4  periodoGuia de html 3 y 4  periodo
Guia de html 3 y 4 periodo
 
Guia de repaso html11
Guia de repaso html11Guia de repaso html11
Guia de repaso html11
 
Manual html
Manual htmlManual html
Manual html
 
Estructurabasica
EstructurabasicaEstructurabasica
Estructurabasica
 
Guia html
Guia htmlGuia html
Guia html
 
PresentacióN Html
PresentacióN HtmlPresentacióN Html
PresentacióN Html
 
Producto 4
Producto 4Producto 4
Producto 4
 
CODIGOS HTML.Magdalena ortega de nariño.
CODIGOS HTML.Magdalena ortega de nariño.CODIGOS HTML.Magdalena ortega de nariño.
CODIGOS HTML.Magdalena ortega de nariño.
 
institucion educativa la esperanza sede magdalena
institucion educativa la esperanza sede magdalenainstitucion educativa la esperanza sede magdalena
institucion educativa la esperanza sede magdalena
 
Html basico
Html basicoHtml basico
Html basico
 

Más de Abdel Suarez

Dibujando art droid pc
Dibujando  art droid pcDibujando  art droid pc
Dibujando art droid pc
Abdel Suarez
 
Barra social
Barra socialBarra social
Barra social
Abdel Suarez
 
Typo
TypoTypo
La publicidad
La publicidadLa publicidad
La publicidad
Abdel Suarez
 
Presentación proyecto integrador
Presentación proyecto integradorPresentación proyecto integrador
Presentación proyecto integrador
Abdel Suarez
 
Creatividad
CreatividadCreatividad
Creatividad
Abdel Suarez
 
Comunicación (Doc de la U. Nacional)
Comunicación (Doc de la U. Nacional)Comunicación (Doc de la U. Nacional)
Comunicación (Doc de la U. Nacional)
Abdel Suarez
 
Comunicación
ComunicaciónComunicación
Comunicación
Abdel Suarez
 
Css 3
Css 3Css 3
Css 2
Css 2Css 2
Css
CssCss
Maqueta
MaquetaMaqueta
Maqueta
Abdel Suarez
 
Ejercicio
EjercicioEjercicio
Ejercicio
Abdel Suarez
 
Ejercicio
EjercicioEjercicio
Ejercicio
Abdel Suarez
 
Ejercicio
EjercicioEjercicio
Ejercicio
Abdel Suarez
 
Css intro
Css introCss intro
Css intro
Abdel Suarez
 
Visual marca
Visual marcaVisual marca
Visual marca
Abdel Suarez
 
Diseño Básico Fundamentos
Diseño Básico FundamentosDiseño Básico Fundamentos
Diseño Básico Fundamentos
Abdel Suarez
 
Estructura
EstructuraEstructura
Estructura
Abdel Suarez
 
Positivo negativo
Positivo negativoPositivo negativo
Positivo negativo
Abdel Suarez
 

Más de Abdel Suarez (20)

Dibujando art droid pc
Dibujando  art droid pcDibujando  art droid pc
Dibujando art droid pc
 
Barra social
Barra socialBarra social
Barra social
 
Typo
TypoTypo
Typo
 
La publicidad
La publicidadLa publicidad
La publicidad
 
Presentación proyecto integrador
Presentación proyecto integradorPresentación proyecto integrador
Presentación proyecto integrador
 
Creatividad
CreatividadCreatividad
Creatividad
 
Comunicación (Doc de la U. Nacional)
Comunicación (Doc de la U. Nacional)Comunicación (Doc de la U. Nacional)
Comunicación (Doc de la U. Nacional)
 
Comunicación
ComunicaciónComunicación
Comunicación
 
Css 3
Css 3Css 3
Css 3
 
Css 2
Css 2Css 2
Css 2
 
Css
CssCss
Css
 
Maqueta
MaquetaMaqueta
Maqueta
 
Ejercicio
EjercicioEjercicio
Ejercicio
 
Ejercicio
EjercicioEjercicio
Ejercicio
 
Ejercicio
EjercicioEjercicio
Ejercicio
 
Css intro
Css introCss intro
Css intro
 
Visual marca
Visual marcaVisual marca
Visual marca
 
Diseño Básico Fundamentos
Diseño Básico FundamentosDiseño Básico Fundamentos
Diseño Básico Fundamentos
 
Estructura
EstructuraEstructura
Estructura
 
Positivo negativo
Positivo negativoPositivo negativo
Positivo negativo
 

Último

16.-JUNIO-NTC-3701-CAUSAS-BASICAS-Y-CAUSAS-INMEDIATAS-EN-LOS-A.T.pdf
16.-JUNIO-NTC-3701-CAUSAS-BASICAS-Y-CAUSAS-INMEDIATAS-EN-LOS-A.T.pdf16.-JUNIO-NTC-3701-CAUSAS-BASICAS-Y-CAUSAS-INMEDIATAS-EN-LOS-A.T.pdf
16.-JUNIO-NTC-3701-CAUSAS-BASICAS-Y-CAUSAS-INMEDIATAS-EN-LOS-A.T.pdf
jhcueroz
 
Arquitectura Moderna Contexto Venezolano
Arquitectura Moderna Contexto VenezolanoArquitectura Moderna Contexto Venezolano
Arquitectura Moderna Contexto Venezolano
imariagsg
 
Manual.pdfsoporte y mantenimientode equipo de computo
Manual.pdfsoporte y mantenimientode equipo de computoManual.pdfsoporte y mantenimientode equipo de computo
Manual.pdfsoporte y mantenimientode equipo de computo
mantenimientofresita
 
Acceso y utilización de los espacios públicos. Comunicación y señalización..pdf
Acceso y utilización de los espacios públicos. Comunicación y señalización..pdfAcceso y utilización de los espacios públicos. Comunicación y señalización..pdf
Acceso y utilización de los espacios públicos. Comunicación y señalización..pdf
José María
 
El Crecimiento Urbano de las Ciudades Latinoamericanas
El Crecimiento Urbano de las Ciudades LatinoamericanasEl Crecimiento Urbano de las Ciudades Latinoamericanas
El Crecimiento Urbano de las Ciudades Latinoamericanas
LeonardoDantasRivas
 
Sesion 07. Ecuaciones de kremser y columnas empacadas.pdf
Sesion 07. Ecuaciones de kremser y columnas empacadas.pdfSesion 07. Ecuaciones de kremser y columnas empacadas.pdf
Sesion 07. Ecuaciones de kremser y columnas empacadas.pdf
MeryQuezada2
 
puentes_Puentes_Semipermanentes.documento
puentes_Puentes_Semipermanentes.documentopuentes_Puentes_Semipermanentes.documento
puentes_Puentes_Semipermanentes.documento
GuillermoAlejandroCh6
 
Catalogo Coleccion Atelier Bathco Distribuidor Oficial Amado Salvador Valencia
Catalogo Coleccion Atelier Bathco Distribuidor Oficial Amado Salvador ValenciaCatalogo Coleccion Atelier Bathco Distribuidor Oficial Amado Salvador Valencia
Catalogo Coleccion Atelier Bathco Distribuidor Oficial Amado Salvador Valencia
AMADO SALVADOR
 
Álbum Collage de Fotos día del padre polaroid scrapbook pastel_20240611_040...
Álbum Collage de Fotos día del padre  polaroid scrapbook  pastel_20240611_040...Álbum Collage de Fotos día del padre  polaroid scrapbook  pastel_20240611_040...
Álbum Collage de Fotos día del padre polaroid scrapbook pastel_20240611_040...
Soleito
 
El Movimiento Moderno en Venezuela. Y los cambios que trajo en la arquitectura
El Movimiento Moderno en Venezuela. Y los cambios que trajo en la arquitecturaEl Movimiento Moderno en Venezuela. Y los cambios que trajo en la arquitectura
El Movimiento Moderno en Venezuela. Y los cambios que trajo en la arquitectura
slaimenbarakat
 
Portfolio_itsmevalen/ Valentina Balmaceda
Portfolio_itsmevalen/ Valentina BalmacedaPortfolio_itsmevalen/ Valentina Balmaceda
Portfolio_itsmevalen/ Valentina Balmaceda
ValentinaBalmaceda2
 
DIAPOSITIVAS MONOGRAFIA de el consumo excesivo del alcohol en adolescentes .pptx
DIAPOSITIVAS MONOGRAFIA de el consumo excesivo del alcohol en adolescentes .pptxDIAPOSITIVAS MONOGRAFIA de el consumo excesivo del alcohol en adolescentes .pptx
DIAPOSITIVAS MONOGRAFIA de el consumo excesivo del alcohol en adolescentes .pptx
RONALD533356
 
manual_civilcad y uso de modulos cargados
manual_civilcad y uso de modulos cargadosmanual_civilcad y uso de modulos cargados
manual_civilcad y uso de modulos cargados
AlbertoGarcia461436
 
SEMANA 02 TRAZOS DE POLIGONALES TOPOGRÁFICAS 04.pptx
SEMANA 02 TRAZOS DE POLIGONALES TOPOGRÁFICAS 04.pptxSEMANA 02 TRAZOS DE POLIGONALES TOPOGRÁFICAS 04.pptx
SEMANA 02 TRAZOS DE POLIGONALES TOPOGRÁFICAS 04.pptx
CarlosDanielAlanocaT1
 
manual pdf de empresa postres maria jose
manual pdf de empresa postres maria josemanual pdf de empresa postres maria jose
manual pdf de empresa postres maria jose
tatianezpapa
 
guia-para-el-diseno-de-parques-locales-accesibles-2023.pdf
guia-para-el-diseno-de-parques-locales-accesibles-2023.pdfguia-para-el-diseno-de-parques-locales-accesibles-2023.pdf
guia-para-el-diseno-de-parques-locales-accesibles-2023.pdf
RofoMG
 
BROCHURE QONDESA ABRIL 19 OK_pdf_LLQ.pdf
BROCHURE QONDESA ABRIL 19 OK_pdf_LLQ.pdfBROCHURE QONDESA ABRIL 19 OK_pdf_LLQ.pdf
BROCHURE QONDESA ABRIL 19 OK_pdf_LLQ.pdf
IzaakAzaga
 
Catalogo General Azteca Ceramica Distribuidor Oficial Amado Salvador Valencia
Catalogo General Azteca Ceramica Distribuidor Oficial Amado Salvador ValenciaCatalogo General Azteca Ceramica Distribuidor Oficial Amado Salvador Valencia
Catalogo General Azteca Ceramica Distribuidor Oficial Amado Salvador Valencia
AMADO SALVADOR
 
RAMESSEUM_ EL TEMPLO DE MILLONES DE AÑOS DE RAMSÉS II - Mundos antiguos digit...
RAMESSEUM_ EL TEMPLO DE MILLONES DE AÑOS DE RAMSÉS II - Mundos antiguos digit...RAMESSEUM_ EL TEMPLO DE MILLONES DE AÑOS DE RAMSÉS II - Mundos antiguos digit...
RAMESSEUM_ EL TEMPLO DE MILLONES DE AÑOS DE RAMSÉS II - Mundos antiguos digit...
SarahVzquezVsquez
 
metodologia empleada en smart toolsboxs.
metodologia empleada en smart toolsboxs.metodologia empleada en smart toolsboxs.
metodologia empleada en smart toolsboxs.
jeanlozano33
 

Último (20)

16.-JUNIO-NTC-3701-CAUSAS-BASICAS-Y-CAUSAS-INMEDIATAS-EN-LOS-A.T.pdf
16.-JUNIO-NTC-3701-CAUSAS-BASICAS-Y-CAUSAS-INMEDIATAS-EN-LOS-A.T.pdf16.-JUNIO-NTC-3701-CAUSAS-BASICAS-Y-CAUSAS-INMEDIATAS-EN-LOS-A.T.pdf
16.-JUNIO-NTC-3701-CAUSAS-BASICAS-Y-CAUSAS-INMEDIATAS-EN-LOS-A.T.pdf
 
Arquitectura Moderna Contexto Venezolano
Arquitectura Moderna Contexto VenezolanoArquitectura Moderna Contexto Venezolano
Arquitectura Moderna Contexto Venezolano
 
Manual.pdfsoporte y mantenimientode equipo de computo
Manual.pdfsoporte y mantenimientode equipo de computoManual.pdfsoporte y mantenimientode equipo de computo
Manual.pdfsoporte y mantenimientode equipo de computo
 
Acceso y utilización de los espacios públicos. Comunicación y señalización..pdf
Acceso y utilización de los espacios públicos. Comunicación y señalización..pdfAcceso y utilización de los espacios públicos. Comunicación y señalización..pdf
Acceso y utilización de los espacios públicos. Comunicación y señalización..pdf
 
El Crecimiento Urbano de las Ciudades Latinoamericanas
El Crecimiento Urbano de las Ciudades LatinoamericanasEl Crecimiento Urbano de las Ciudades Latinoamericanas
El Crecimiento Urbano de las Ciudades Latinoamericanas
 
Sesion 07. Ecuaciones de kremser y columnas empacadas.pdf
Sesion 07. Ecuaciones de kremser y columnas empacadas.pdfSesion 07. Ecuaciones de kremser y columnas empacadas.pdf
Sesion 07. Ecuaciones de kremser y columnas empacadas.pdf
 
puentes_Puentes_Semipermanentes.documento
puentes_Puentes_Semipermanentes.documentopuentes_Puentes_Semipermanentes.documento
puentes_Puentes_Semipermanentes.documento
 
Catalogo Coleccion Atelier Bathco Distribuidor Oficial Amado Salvador Valencia
Catalogo Coleccion Atelier Bathco Distribuidor Oficial Amado Salvador ValenciaCatalogo Coleccion Atelier Bathco Distribuidor Oficial Amado Salvador Valencia
Catalogo Coleccion Atelier Bathco Distribuidor Oficial Amado Salvador Valencia
 
Álbum Collage de Fotos día del padre polaroid scrapbook pastel_20240611_040...
Álbum Collage de Fotos día del padre  polaroid scrapbook  pastel_20240611_040...Álbum Collage de Fotos día del padre  polaroid scrapbook  pastel_20240611_040...
Álbum Collage de Fotos día del padre polaroid scrapbook pastel_20240611_040...
 
El Movimiento Moderno en Venezuela. Y los cambios que trajo en la arquitectura
El Movimiento Moderno en Venezuela. Y los cambios que trajo en la arquitecturaEl Movimiento Moderno en Venezuela. Y los cambios que trajo en la arquitectura
El Movimiento Moderno en Venezuela. Y los cambios que trajo en la arquitectura
 
Portfolio_itsmevalen/ Valentina Balmaceda
Portfolio_itsmevalen/ Valentina BalmacedaPortfolio_itsmevalen/ Valentina Balmaceda
Portfolio_itsmevalen/ Valentina Balmaceda
 
DIAPOSITIVAS MONOGRAFIA de el consumo excesivo del alcohol en adolescentes .pptx
DIAPOSITIVAS MONOGRAFIA de el consumo excesivo del alcohol en adolescentes .pptxDIAPOSITIVAS MONOGRAFIA de el consumo excesivo del alcohol en adolescentes .pptx
DIAPOSITIVAS MONOGRAFIA de el consumo excesivo del alcohol en adolescentes .pptx
 
manual_civilcad y uso de modulos cargados
manual_civilcad y uso de modulos cargadosmanual_civilcad y uso de modulos cargados
manual_civilcad y uso de modulos cargados
 
SEMANA 02 TRAZOS DE POLIGONALES TOPOGRÁFICAS 04.pptx
SEMANA 02 TRAZOS DE POLIGONALES TOPOGRÁFICAS 04.pptxSEMANA 02 TRAZOS DE POLIGONALES TOPOGRÁFICAS 04.pptx
SEMANA 02 TRAZOS DE POLIGONALES TOPOGRÁFICAS 04.pptx
 
manual pdf de empresa postres maria jose
manual pdf de empresa postres maria josemanual pdf de empresa postres maria jose
manual pdf de empresa postres maria jose
 
guia-para-el-diseno-de-parques-locales-accesibles-2023.pdf
guia-para-el-diseno-de-parques-locales-accesibles-2023.pdfguia-para-el-diseno-de-parques-locales-accesibles-2023.pdf
guia-para-el-diseno-de-parques-locales-accesibles-2023.pdf
 
BROCHURE QONDESA ABRIL 19 OK_pdf_LLQ.pdf
BROCHURE QONDESA ABRIL 19 OK_pdf_LLQ.pdfBROCHURE QONDESA ABRIL 19 OK_pdf_LLQ.pdf
BROCHURE QONDESA ABRIL 19 OK_pdf_LLQ.pdf
 
Catalogo General Azteca Ceramica Distribuidor Oficial Amado Salvador Valencia
Catalogo General Azteca Ceramica Distribuidor Oficial Amado Salvador ValenciaCatalogo General Azteca Ceramica Distribuidor Oficial Amado Salvador Valencia
Catalogo General Azteca Ceramica Distribuidor Oficial Amado Salvador Valencia
 
RAMESSEUM_ EL TEMPLO DE MILLONES DE AÑOS DE RAMSÉS II - Mundos antiguos digit...
RAMESSEUM_ EL TEMPLO DE MILLONES DE AÑOS DE RAMSÉS II - Mundos antiguos digit...RAMESSEUM_ EL TEMPLO DE MILLONES DE AÑOS DE RAMSÉS II - Mundos antiguos digit...
RAMESSEUM_ EL TEMPLO DE MILLONES DE AÑOS DE RAMSÉS II - Mundos antiguos digit...
 
metodologia empleada en smart toolsboxs.
metodologia empleada en smart toolsboxs.metodologia empleada en smart toolsboxs.
metodologia empleada en smart toolsboxs.
 

Etiquetas

  • 3. La etiqueta de encabezado H1 y sus hermanas pequeñas son una de las herramientas más potentes para decirle a los buscadores cual es la importancia del contenido de nuestra página web.
  • 4. Qué es la etiqueta h1 (y qué no es)?
  • 5. h1 es una etiqueta que sirve para colocar la frase que indica el título del contenido de una página web. Importante en este punto delimitar de forma clara la diferencia entre sitio web y página web: un título h1 debe hacer referencia a una página de tu sitio web, y no al sitio web en general.
  • 6. La segunda de las conclusiones es que si resume el contenido de una única página, tu sitio web completo deberá tener un h1 para cada uno de los documentos, que resuma el contenido de la misma de la forma más específica posible. Un caso de mal uso para esta norma son aquellos sitios web donde el h1 está dedicado en todas las páginas al nombre de la compañía.
  • 7. Como título que es lo lógico es que tu titular h1 aparezca cuanto más arriba de la página mejor, tal cual lo haría el título de una noticia en una web. confiere mayor importancia al contenido situado en el primer tramo de un documento web, y también para el usuario es lógico encontrar el h1 en esa posición.
  • 8. Qué es la etiqueta h2 (y qué no es)?
  • 9. La etiqueta h2 es un elemento similar al h1, que indica títulos de importancia para subsecciones del documento web actual. Por su naturaleza, puede haber varios h2 en un sitio, que indiquen los diferentes títulos de importancia de la página en la que nos encontramos.
  • 10. No debemos confundir los h2 con herramientas para colocar títulos en las zonas de nuestra página: “Últimas noticias”, “Contáctame”, ”Zona de usuario”, “Páginas amigas”, “Bienvenido a mi web”… son títulos genéricos para bloques de una web, pero que nada tienen que aportar al contenido.
  • 11. Qué es la etiqueta h3,h4… (y qué no es)?
  • 12. Las etiquetas h3 en adelante nos permiten definir títulos de subapartados de un bloque encabezado con un h2. Su incidencia en SEO es más limitada, y por ello no es habitual ni recomendable el trabajar los titulares a partir de h4.!
  • 13. Quitar todos los elementos restantes de tu sitio web y dejar sólo los titulares deberían en la mayoría de los casos dar una idea del contenido de tu página, tal cual lo hace un índice en un libro: las etiquetas de encabezado deben describir la estructura del artículo.
  • 14. La etiqueta <br>, no se tiene que cerrar?
  • 15. la verdad es que todas las etiquetas se pueden cerrar perfectamente, pero no estamos obligados a hacerlo, dado que HTML es un lenguaje bastante abierto y los navegadores permiten mostrar código con algunos errores o fallos de codificación sin que estos se vean reflejados en el aspecto de nuestra página.
  • 17. Cualquiera de las dos etiquetas sirven para colocar un texto en negrita pero strong es la que más reconocen los buscadores como
  • 19. La etiqueta <span> se utiliza para añadir estructura a una parte de un texto.! ! Esta etiqueta se usa comúnmente para añadir un estilo determinado dentro de una sección del texto.
  • 21. <i>
  • 22. Transforma el texto en itálica
  • 24. La etiqueta blockquote se escribe gracias a la apertura <blockquote> y a su cierre </blockquote>. Todo lo que esté dentro de está etiqueta estará sujeto a su acción. El blockquote se usa para escribir una cita textual o un párrafo exacto y que éste se diferencie del resto del texto. El efecto que nos muestra es que crea unos espacios a la derecha y a la izquierda del texto, para que se diferencie de los demás.
  • 26. La etiqueta <cite> contiene una cita o referencia a otro lugar.
  • 27. <tt>
  • 28. son las iniciales de “teletype”. Utilizando esta etiqueta conseguiremos un espaciado simple entre las diferentes letras del texto. Abriremos la etiqueta con <tt> y la cerraremos con </tt>
  • 30. Cada vez que escribamos una etiqueta, haremos el texto un punto más grande. Pero estas etiquetas también la podemos combinar, por lo que si escribimos dos veces la etiqueta <big>, haremos crecer la palabra dos puntos.! ! Un ejemplo sería el siguiente:! ! Esta palabra se va a escribir <small>pequeñita</small>, esta se va a escribir <big>más grande</big> y ésta <big><big>más grande aún</big></big>.! ! Esta palabra se va a escribir pequeñita, esta se va a escribir más grande y ésta más grande aún.!
  • 32. Gracias a estas etiquetas podemos escribir cualquier formula matemática como esta: H <sub>2</sub> O o números elevados a potencias 7<sup>3</sup>.! ! Gracias a estas etiquetas podemos escribir cualquier formula matemática como esta: ! ! H 2 O o números elevados a potencias 7 3 .!
  • 34. la etiqueta body también podemos personalizarla para darle el aspecto que nosotros deseemos
  • 35. Color de fondo: bgcolor
  • 36. El primer parámetro que debes conocer es el del color de fondo, el "bgcolor". A través de este parámetro podremos definir el color de fondo que queramos que tenga nuestra página. Un ejemplo muy simple es el siguiente: Si queremos que nuestra página quede con un fondo rojo deberemos escribir:! <body bgcolor="#FF0000"></ body>!
  • 37.
  • 38. Imagen de fondo: background! Puede que no quieres que tu página tenga un color sólo de fondo, sino que quieras que tu página tenga una imagen. En ese caso deberás indicarlo con la etiqueta "background". La etiqueta quedaría de la siguiente manera:! <body background="URL"> </body>!
  • 40. Una vez tenemos el fondo definido, tendremos que predefinir ahora el color del texto de nuestra web. Es decir, tendremos que decirle al navegador de qué color queremos que sea nuestro texto. Esto lo definiremos con el parámetro "text". ! Como ejemplo vamos a poner que queremos que nuestro texto sea en negro, con lo que escribiremos lo siguiente: <body text= "#000000"></body>
  • 42. Si queremos que nuestros márgenes sean de 10 píxeles por todas partes escribiremos lo siguiente:! <body leftmargin="10px" topmargin="10px" rightmargin="10px" bottommargin="10px"></body>!
  • 43. Color de links: link, alink y vlink
  • 44. En body también podemos ( y de hecho debemos hacerlo) definir el color de los vínculos de nuestra páginas, definir el color con el que se mostraran los links. Aquí debemos diferenciar tres tipos de instrucciones: Debemos definir el color del link (con la etiqueta "link"), el color del link activo (con la etiqueta "alink") y el color del link ya visitado (con la etiqueta "vlink").
  • 45. si queremos que nuestra página tenga un color de enlaces (de links) de color rojo y que esos enlaces sean rojos cuando estén activos y se queden en azul cuando estén inactivos deberemos escribir lo siguiente:! <body link= "#FF0000" alink= "#FF0000" vlink= "# 0000FF"></body>!