HTML Introducción 3 Etiquetas

Diseño
WEB
1
Situación
Las páginas web son herramientas de divulgación de información
con múltiples fines: desde brindar conocimiento, hasta generar
oportunidades de negocio. Sea cual sea el propósito, todas ellas
tienen en común un lenguaje con el cual son construidas: el HTML.
Es así que Pedro el emprendedor el cual tiene un negocio de venta
y reparación de aparatos tecnológicos, está diseñando su página
web para su negocio y él es novato en el tema, pero tiene todo el
entusiasmo.
¿Qué tendrá que hacer Pedro para empezar a diseñar su página
web?
Pedro Armijo 2
¿Qué lenguaje de páginas web utilizara Pedro?
¿Cómo realizara la estructuración de su página web?
¿Qué elementos del lenguaje HTML deberá de utilizar Responde a las

Pedro? siguientes
preguntas
3
IDENTIFICAMOS Y
EMPLEAMOS ETIQUETAS
HTML BASICAS PARA
ESTRUCTURAR Y DESPLEGAR
NESTRA PRIMERA PÁGINA
WEB
PROPÓSITO DE LA ACTIVIDAD: Los estudiantes
identifican y emplean las etiquetas básicas del
lenguaje HTML para la estructuración de su
primera página web.
Pedro Armijo 4
Crea tu presentación para
responder las siguientes
preguntas
• ¿Qué son las etiquetas?
• ¿Qué características tienen y
cuáles son las más conocidas?
• ¿Qué son los atributos y para qué
sirven?
5
HTML
HyperText
Markup
Language
LOS CODIGOS
Los códigos se encierran entre los caracteres menor que
"<" y mayor que ">". Estos códigos encerrados entre
estos dos caracteres son llamados comúnmente
1 2
ETIQUETAS (tags).
Siempre van entre los caracteres "< >" y no importa si
los codificamos en mayúsculas o en minúsculas ya que no
son sensibles a este hecho. Sin embargo, podremos
reconocer de manera más sencilla las etiquetas en un
documento web si éstas se codifican en mayúsculas 3 4
La mayor parte de los elementos de un documento HTML

tienen una etiqueta de inicio y una de fin. Esta última se
distingue por la barra inclinada "/" que aparece dentro
de los símbolos.
5 6
Pedro Armijo 7
<HTML>
<HEAD>
<TITLE>
Ejemplo 1
</TITLE>
</HEAD>
<BODY>
Hola mundo
</BODY>
</HTML>
Note el indentado (margen que se deja para
saber donde empieza y donde acaba cada
instrucción)
8
El lenguaje HTML se basa en etiquetas, por eso
es importante entender bien la sintaxis de las
etiquetas. El siguiente esquema muestra las
partes de una etiqueta HTML genérica.
Pedro Armijo 9
En una etiqueta, la primera palabra que aparece es
el nombre de la etiqueta. También podemos
encontrar atributos con sus valores, siguiendo el formato
<etiqueta atributo1="valor" atributo2="valor">
La forma más correcta es escribir el nombre de la
etiqueta y los atributos en minúscula, y los valores entre
comillas dobles.
Si un atributo tiene más de un valor, se

escriben todos los valores dentro de las mismas
comillas, separados por espacios en blanco, por
ejemplo
<etiqueta atributo="valor1 valor2">
10
La etiqueta BODY
En ésta se puede establecer entre otras cosas el color
de fondo y el color del texto, así como una imagen de
fondo.
<BODY
TEXT=“#RRGGBB” | “algún color”
BGCOLOR=“#RRGGBB” | “algún color”
LINK= “#RRGGBB” | “algún color”
VLINK=“#RRGGBB” | “algún color”
BACKGROUND=“alguna imagen”
>
Pedro Armijo 11
El tamaño del texto y
comentarios
<HTML>
<HEAD>
<TITLE>Ejemplo 2</TITLE>
</HEAD>
<BODY>
<H1>Mi primera página H1</H1>

<H2>h2</H2>
<H3>h3</H3>
<H4>h4</H4>
<H5>h5</H5>
<H6>h6</H6>
</BODY>
</HTML>
12
Etiquetas básicas ejercicio
Formato
<B>negrita
<I> cursiva
<u>subrayado
<sup> superíndice
<sub> subíndice
<strike> Tachado
<center> texto </center> Centra el texto sobre la

pantalla
Pedro Armijo 13
Algunas etiquetas no tienen contenido, y se cierran sobre sí mismas,
no tienen etiqueta de cierre, se llaman etiquetas vacías, como la
etiqueta <br>. En estas etiquetas opcionalmente se puede colocar una
barra justo antes del signo >, por ejemplo:
<br />. La etiqueta <br> produce un salto de línea.
Las etiquetas vacías no tienen contenido pero si pueden tener
atributos. Algunas otras etiquetas vacías son <hr>, <img>, <input>,
<link>, <meta>, <param> y <source>.
Pedro Armijo 14
<BR>
salto de linea
Pedro Armijo 15
Tamaños y formatos
El elemento p (párrafo) es el apropiado para distribuir
el texto en párrafos.
Sus etiquetas son : <p> y </p> (la de cierre es opcional).
style (style)
Este atributo es utilizado para definir atributos presentacionales

para el elemento contenedor, y su valor debería estar compuesto
por propiedades de hojas de estilo
<p style="color: #0000FF; font-size: 12pt">Este es un

párrafo con un estilo definido.</p>
<p>Y este es otro texto sin estilo.</p>
Pedro Armijo 16

HTML Introducción 3 Etiquetas

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

HTML Introducción 3 Etiquetas

Cargado por

Copyright:

Formatos disponibles

Diseño

¿Cómo realizara la estructuración de su página web?

¿Qué elementos del lenguaje HTML deberá de utilizar Responde a las

La mayor parte de los elementos de un documento HTML

Si un atributo tiene más de un valor, se

<center> texto </center> Centra el texto sobre la

Sus etiquetas son : <p> y </p> (la de cierre es opcional).

Este atributo es utilizado para definir atributos presentacionales

<p style="color: #0000FF; font-size: 12pt">Este es un

<p>Y este es otro texto sin estilo.</p>

También podría gustarte