WG49ML9HEY

I.E.
ROBERTO VELANDIA
MOSQUERA- CUNDINAMARCA
GUIA DIDACTICA. DOCENTE ANDREA GARCIA ENCISO
GRADO DECIMO 1001 a 1006
AREA TECNOLOGIA
OBJETIVO Categorizar algunas etiquetas de HTML en sublime text.
COMPETENCIAS Análisis de problemas reconociendo la información relevante y las posibles causas
del mismo.
ESTRATEGIAS 1. Realiza los ejemplos del marco teórico son 9 ejemplos, lo único que debe
DIDACTICAS hacer es copiar, pegar el código, como siempre al final de cada código escribir su
(CONSRUCTIVISMO) nombre y grado en un color diferente cada uno, ese archivo lo hacen en un
documento de Word, por ende debe tener 9 hojas en cada hoja de forma horizontal
coloca el código de sublime y la pagina ya terminada, se debe visualizar toda su
pantalla con fecha y hora esta parte la envía a la plataforma.
2. Los archivos de sublime los comprime en una carpeta y los envía al correo.
3. Vaya mirando el tema de su proyecto para realizar su página web, recordar
que esta se hace de manera individual,
TIEMPO 3 Sesiones
RECURSOS Paginas y programas que ayudan a su proceso.
Sublime text - https://harphymurx.com/curso-basico-html-sublime-text-2-etiquetas-
basicas/
EVALUACION 4. Realiza una página aplicando las etiquetas ya vistas con uno de los
siguientes temas, animales vertebrados e invertebrados, Animales en peligro de
extinción. Trucos de belleza Venta de artículos hechos en casa energías
alternativas Defensa personal. Aprender a tocar instrumentos aeromodelismo, en
los encuentros virtuales vamos a ver cómo darle estilo a su pagina
Nota tener en cuenta:

enviarla a la plataforma o correo electrónico: teacherandreainfor@gmail.com
ASUNTO NOMBRES COMPLETOS Y GRADO
cualquier inquietud al correo O AL WS 3156713019
Si no tiene computador, ni celular, ni tablet, por favor comunicarse conmigo
El diseño de una página web, escoge un tema de interés (cada uno debe tener temas diferentes) la
evaluación final de este semestre es su página web la cual el día del encuentro virtual lo
socializamos.
Por favor enviar los trabajos con portada (nombres y apellidos completos, grado, jornada, nombre del
colegio etc)
La etiqueta <abbr> marca las abreviaturas de un

MARCO TEORICO texto y la etiqueta <acronym> se emplea para
Lenguajes de etiquetas marcar las siglas o acrónimos del texto. Su
definición es la siguiente:
Aunque existen algunas excepciones, en general Etiqueta <abbr>
las etiquetas se indican por pares y se forman de
la siguiente manera: Descripció Se emplea para marcar las abreviaturas de
n proporcionar el significado de esas abreviat
 Etiqueta de apertura: carácter <, seguido Etiqueta <acronym>
del nombre de la etiqueta (sin espacios en
Descripció Se emplea para marcar las siglas o acrónim
blanco) y terminado con el carácter >
n texto y proporcionar el significado de esas s
 Etiqueta de cierre: carácter <, seguido del
carácter /, seguido del nombre de la En ambos casos, el atributo title se puede utilizar
etiqueta (sin espacios en blanco) y para incluir el significado completo de la
terminado con el carácter > abreviatura o sigla.
Así, la estructura típica de las etiquetas HTML es:
<nombre_etiqueta> ... </nombre_etiqueta> Ejemplo 1:
HTML es un lenguaje de etiquetas (también
llamado lenguaje de marcado) y las páginas web <html>
habituales están formadas por cientos o miles de <head>
pares de etiquetas. De hecho, las letras "ML" de <title>Ejemplo
la sigla HTML significan "markup language", que de etiqueta
es como se denominan en inglés a los lenguajes acronym</title>
de marcado. Además de HTML, existen muchos </head>
otros lenguajes de etiquetas como XML, SGML, <body>
DocBook y MathML. <p>El lenguaje
Marcado avanzado de texto <acronym
Las páginas y documentos más avanzados title="HyperText
suelen incluir otros elementos importantes que se Markup Language">HTML</acronym> es
deben marcar de forma adecuada. Por ello, HTML estandarizado por el <acronym title="World Wide
incluye muchas otras etiquetas que permiten Web Consortium">W3C</acronym>.</p>
marcar más elementos del texto. </body>
</html>
línea <br/>
La mayoría de navegadores muestran por defecto y otro tipo de espaciado.</p>
un borde inferior punteado para todos los </body>
elementos <abbr> y <acronym>. Al posicionar el </html>
puntero del ratón sobre la palabra subrayada, el
navegador muestra un pequeño recuadro Espacios en blanco
(llamado tooltip en inglés) con el valor del La solución al problema de los espacios en
atributo title: blanco no es tan sencilla como el de las nuevas
líneas. Para incluir espacios en blanco
Por otra parte, en ocasiones resulta útil incluir la adicionales, se debe sustituir cada nuevo espacio
definición de una palabra extraña o cuyo uso está en blanco por el texto (es importante
restringido a un entorno muy determinado. HTML incluir el símbolo & al principio y el símbolo ; al
incluye la etiqueta <dfn> para proporcionar al final).
usuario la definición de todas las palabras para Así, el código HTML del ejemplo anterior se debe
las que se considere apropiado. La definición rehacer para incluir los espacios en blanco
formal de esta etiqueta se muestra a adicionales:
continuación:
Ejemplo 4
Etiqueta <dfn>
<html>
Se emplea para marcar las definiciones de ciertos <head>
Descripció
términos y proporcionar el significado de esos <title>Ejemplo
n
términos de entidad
</title>
El siguiente ejemplo muestra cómo se utiliza la </head>
etiqueta <dfn> para incluir la definición completa <body>
de una palabra cuyo uso no es habitual fuera de <p>Este primer párrafo no contiene saltos de
los ámbitos médicos y psicológicos: línea ni otro tipo de espaciado.</p>
Ejemplo 2 <p>Este segundo párrafo sí que contiene saltos

<br/>
<html> de <br/>
<head> línea <br/>
<title>Ejemplo de y otro tipo de
etiqueta dfn</title> espaciado.</p>
</head> </body>
<body> </html>
<p>Con estos síntomas, podría tratarse de un
caso de <dfn title="Imagen o sensación subjetiva, Ahora el navegador sí que muestra correctamente
propia de un sentido, determinada por otra los espacios en blanco (y las nuevas líneas) del
sensación que afecta a un sentido segundo párrafo:
diferente">sinestesia</dfn></p> Cada texto solamente equivale a un
</body> espacio en blanco, por lo que se deben escribir
</html> tantos seguidos como espacios en blanco
seguidos existan en el texto.
Nuevas líneas Más adelante se profundiza en el origen
Para incluir una nueva línea en un punto y forzar de y se comprenderá por qué es
a que el texto que sigue se muestre en la línea necesario incluir esa sucesión tan extraña de
inferior, se utiliza la etiqueta <br>. En cierta caracteres cada vez que se quiere incluir un
manera, insertar la etiqueta <br> en un espacio en blanco adicional.
determinado punto del texto equivale a presionar
la tecla ENTER (o Intro) en ese mismo punto. Texto preformateado
La definición formal de <br> se muestra a En ocasiones, es necesario mostrar los espacios
continuación: en blanco de un texto que no se puede modificar.
Se trata de un caso habitual cuando una página
Etiqueta <br> web debe mostrar directamente el texto generado
por alguna aplicación.
Descripción Fuerza al navegador a insertar una nueva
Enlínea
estos casos, se puede utiliza la
etiqueta <pre>, que muestra el texto tal y como se
Ejemplo 3 ha escrito, respetando todos los espacios en
<html> blanco y todas las nuevas líneas. La definición
<head> formal de la etiqueta se muestra a continuación:
<title>Ejempl Etiqueta <pre>
o de etiqueta
br</title> Descripció Muestra el texto que encierra tal y como es
</head> n (respetando los espacios en blanco)
<body> El siguiente ejemplo muestra el uso de la
<p>Este etiqueta <pre>:
primer párrafo no contiene saltos de línea ni otro
tipo de espaciado.</p>
<p>Este segundo párrafo sí que contiene saltos
<br/>
de <br/> EJEMPLO 5
paso. Cuando se muestra un índice o tabla de
<html> contenidos en un libro, es importante el orden de
<head><title>Ej cada elemento del índice.
emplo de En todos estos casos, la lista más adecuada es la
etiqueta lista ordenada, que se define mediante la
pre</title></hea etiqueta <ol>. Los elementos de la lista se definen
d> mediante la etiqueta <li>, la misma que se utiliza
<body> en las listas no ordenadas.
<pre> Etiqueta <ol>
La etiqueta pre
respeta los espacios en blanco Descripción Se emplea para definir listas ordenadas
y El siguiente código HTML muestra un ejemplo
muestra el texto sencillo de lista ordenada:
tal y como
está escrito EJEMPLO 7
</pre> <html>
<p> <head><title>Ejemplo de
La etiqueta pre etiqueta OL</title></head>
respeta los espacios en blanco <body>
y <h1>Instrucciones</h1>
muestra el texto <ol>
tal y como <li>Enchufar
está escrito correctamente</li>
</p> <li>Comprobar conexiones</li>
</body> <li>Encender el aparato</li>
</html> </ol>
Los elementos <pre> son especiales, ya que los </body>
navegadores les aplican las siguientes reglas: </html>
 Mantienen todos los espacios en blanco Tablas

(tabuladores, espacios y nuevas líneas) Desde
 Muestra el texto con un tipo de letra sus
especial, denominado "de ancho fijo", ya
que todas sus letras son de la misma
anchura
Listas no ordenadas
Las listas no ordenadas son las más sencillas y primeras versiones, HTML incluyó el soporte para
las que más se utilizan. Una lista no ordenada es crear tablas de datos en las páginas web.
un conjunto de elementos relacionados entre sí Además de ser sencillo, el modelo definido por
pero para los que no se indica un orden o HTML es muy flexible y bastante completo.
secuencia determinados. La Las tablas en HTML utilizan los mismos
etiqueta <ul> encierra todos los elementos de la conceptos de filas, columnas, cabeceras y títulos
lista y la etiqueta <li> cada uno de sus elementos. que los que se utilizan en cualquier otro entorno
Etiqueta <ul> de publicación de documentos:
Descripció Se emplea para definir los elementos de las listasque componen una tabla compleja
Partes
n (ordenadas y no ordenadas) Las tablas de HTML pueden contener elementos
El siguiente código HTML muestra un ejemplo simples, agrupaciones de filas y de columnas,
sencillo de lista no ordenada: cabeceras y pies de tabla, subdivisiones,
cabeceras múltiples y otros elementos complejos.
EJEMPLO 6 A continuación se muestra el código HTML de
una tabla sencilla:
<html>
<head><title>Ejemplo de etiqueta EJEMPLO 8
UL</title></head>
<body> <html>
<h1>Menú</h1> <head><title>Ejemplo de tabla
<ul> sencilla</title></head>
<li>Inicio</li> <body>
<li>Noticias</li> <h1>Listado de cursos</h1>
<li>Artículos</li> <table>
<li>Contacto</li> <tr>
</ul> <td><strong>Curso</strong></td>
</body> <td><strong>Horas</strong></td>
</html> <td><strong>Horario</strong></td>
Listas ordenadas </tr>
Las listas ordenadas son casi idénticas a las listas <tr>
no ordenadas, salvo que en este caso los <td>CSS</td>
elementos relacionados se muestran siguiendo un <td>20</td>
orden determinado. Cuando se crea por ejemplo <td>16:00 - 20:00</td>
una lista con las instrucciones de un producto, es </tr>
importante el orden en el que se realiza cada <tr>
<td>HTML</td> </tr>
<td>20</td> <tr>
<td>16:00 - 20:00</td> <td>Reproductor MP3 (80 GB)</td>
</tr> <td>192.02</td>
<tr> <td>1</td>
<td>Dreamweaver</td> <td>192.02</td>
<td>60</td> </tr>
<td>16:00 - 20:00</td> <tr>
</tr> <td>Fundas de colores</td>
</table> <td>2.50</td>
</body> <td>5</td>
</html> <td>12.50</td>
La etiqueta <table> encierra todas las filas y </tr>
columnas de la tabla. Las etiquetas <tr> (del <tr>
inglés "table row") definen cada fila de la tabla y <td>Reproductor de radio & control
encierran todas las columnas. Por último, la remoto</td>
etiqueta <td> (del inglés "table data cell") define <td>12.99</td>
cada una de las columnas de las filas, aunque <td>1</td>
realmente HTML no define columnas sino celdas <td>12.99</td>
de datos. </tr>
Al definir una tabla, se debe pensar en primer <tr>
lugar en las filas que la forman y a continuación <th scope="row">TOTAL</th>
en las columnas. El motivo es que HTML procesa <td>-</td>
primero las filas y por eso las <td>7</td>
etiquetas <tr> aparecen antes que las <td><strong>207.51</strong></td>
etiquetas <td>. </tr>
</table>
Etiqueta <table> </body>
</html>
Descripció Se emplea para definir tablas de
n datos
Etiqueta <tr>
Descripció Se emplea para definir cada fila
n de las tablas de datos
Etiqueta <td>
Se emplea para definir cada una
Descripció de las celdas que forman las filas
n de una tabla, es decir, las
columnas de la tabla
Etiqueta <th>
Se emplea para definir las celdas
Descripció
que son cabecera de una fila o de
n
una columna de la tabla
Por otra parte, HTML define la
etiqueta <caption> para establecer la leyenda o
título de una tabla. La etiqueta debe colocarse
inmediatamente después de la etiqueta <table> y
cada tabla sólo puede incluir una
etiqueta <caption>.
Etiqueta <caption>
Descripció Se emplea para definir la leyenda
n o título de una tabla
EJEMPLO 9
<html>
<head>
<title>Ejemplo de
tabla sencilla</title>
</head>
<body>
<h1>Su pedido</h1>
<table>
<tr>
<th scope="col">Nombre producto</th>
<th scope="col">Precio unitario</th>
<th scope="col">Unidades</th>
<th scope="col">Subtotal</th>

WG49ML9HEY

Cargado por

Información del documento

Descripción original:

Título 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

WG49ML9HEY

Cargado por

Copyright:

Formatos disponibles

I.E.

Nota tener en cuenta:

La etiqueta <abbr> marca las abreviaturas de un

Ejemplo 2 <p>Este segundo párrafo sí que contiene saltos

 Mantienen todos los espacios en blanco Tablas

También podría gustarte