SlideShare una empresa de Scribd logo
1 de 16
HTML


3. Explique que hacen las siguientes etiquetas:

   ETIQUETAS                                  FUNCION
    <HTML>           Indica que se va a escribir código HTML
    <HEAD>           Cabecera del documento
    <TITLE>          Coloca titulo al documento
    <BODY>           Cuerpo del documento. Aquí se pone el verdadero
                     contenido de la página
  <BGCOLOR>          Para dar color al fondo de la página
    <TEXT>           Para darle características al texto
    <LINK>           Para darle características a los hipervínculos

4. Escriba un segmento de código donde muestre la aplicación de las etiquetas
anteriores.

Para comenzar debemos abrir nuestro bloc de notas, vamos a Archivo > Guardar.
Debemos crear una carpeta donde guardaremos todas nuestras páginas
realizadas. En nuestro caso la llamaremos html. Ahora guardamos el documento
con el nombre de ejercicio1.html. Damos clic en Guardar.




Cerramos el bloc de notas. Ahora vamos a nuestra carpeta html y observamos que
el archivo que acabamos de crear aparece con el icono de nuestro navegador, en
este caso Internet Explorer.
Damos doble clic en el archivo y observamos una página en blanco.




Vamos a introducir el código html a nuestra página, para esto vamos al menú Ver
> Código Fuente.
Aparece el bloc de notas con el archivo que habíamos creado anteriormente.
Colocamos un código que cumpla con los requisitos del ejercicio. En nuestro caso
colocaremos el siguiente.




Recuerde que las etiquetas <html> </html> indican que lo que va entre ellas es
código html. Después encontramos las etiquetas <head> </head> que es el
encabezado de la página, dentro de esas etiquetas encontramos <title> </title>
que me indica el título que va a llevar nuestra página web.

El body lleva la instrucción bgcolor para darle un color al fondo, este color va en
código hexadecimal #00ffff que en nuestro caso representa un color azul
aguamarina.

Ahora presentamos la paleta de colores para escojan es que más le agrade.
Observamos que en la parte superior aparece el texto que colocamos en las
etiquetas title.

En la instrucción text colocamos el color por defecto del texto de nuestra página
que en nuestro caso será el rojo.

En link se da el color de los hipervínculos que por norma debe ser azul.

Recordemos que con align alineamos el texto como queramos, en nuestro caso el
texto será centrado.

Colocamos un hipervínculo para observar su color por defecto, al hacer clic sobre
este nos llevará a la página de Hotmail.

Guardamos este documento y vamos a nuestra página web, presionamos F5 para
actualizar y observar los cambios realizados.
5. Explique que hace las siguientes líneas de código html:

Nota: recuerde probarlas en una página web para practicar y observar los
resultados.

1• <FONT FACE=”Times New Roman” SIZE=”3” COLOR=”Yellow”></FONT>
2Coloca características al texto como tipo de fuente (Times New Roman), tamaño
(3) y color (amarillo).

1• <A HREF="copia.html" TARGET="principal">
Escribe un hipervínculo hacia una página que se encuentra en nuestra carpeta,
apareciendo la página en el marco principal de esta.

• <A HREF=dos.jpg><IMG SRC=uno.gif></A>
Hipervínculo hacia una imagen .jpg al dar clic en una imagen .gif

• <A HREF=#top>Arriba</A><br>
Hipervínculo que nos lleva a la parte superior de nuestra página.

1• <HR WIDTH=50% SIZE=20 ALIGN=left COLOR=navy NOSHADE>
2Traza una línea de separación horizontal, de 50% de ancho de la pantalla,
tamaño (grosor) de 20, alineada a la izquierda, con color azul y sin sombra.

6. Escriba un segmento de código donde:

   •   Cargue una imagen de extensión .gif que se debe colocar en las misma
       carpeta donde están grabados los archivos html, el ancho y la altura son de
       50, no tiene borde y que cuando alguien mueva el mouse sobre ella
       aparezca un mensaje que diga ¨Bienvenido¨.
•   Busque un gif animado y cárguelo en esta misma página.

   •   Elabore un marquee a su gusto que quede debajo en esta misma página.


Vamos al bloc de notas y creamos nuestra página con el nombre de
ejercicio2.html.

Primer punto: Ahora escribimos las siguientes líneas de código en el body para
cumplir con el primer punto de nuestro ejercicio.

<p align="center"><img       src="./YOBI.gif"   widht="50"   height="50"   border="0"
alt="Bienvenido">


             ETIQUETA                                   FUNCIÓN
           align="center"                           Centra la imagen
          Src="./YOBI.gif"                        Nombre de la imagen
             widht="50"                            Ancho de la imagen
             height="50"                            Alto de la imagen
             border="0"                                 Sin borde
          alt="Bienvenido"                 Muestra un texto cuando se mueve el
                                                 Mouse sobre la imagen


Segundo punto: cargue el .gif animado de la misma manera como en el Primer
punto. Recuerde que el .gif debe ser animado.

Tercer punto: Escribimos las siguientes líneas de código en el body para cumplir
con el tercer punto de nuestro ejercicio.


<p><b><marquee        behavior="alternate"              bgcolor="#FFFF00"><font
color="#008000">TODOS         SUS                   PROBLEMAS          TIENEN
SOLUCION</font></marquee></p>

             ETIQUETA                                    FUNCIÓN
                 <p>                                  Nuevo párrafo
                 <b>                                Texto en Negrita
              marquee                                  Marquesina
         bgcolor="#FFFF00"                       Color de la marquesina
        font color="#008000"                Color de la letra de la marquesina

Si utilizamos la etiqueta <marquee> sola no existe ningún problema, pero
podemos utilizar etiquetas adicionales que le darán otro efectos como se muestra
a continuación:
ETIQUETA                                 FUNCIÓN
    <marquee behavior="slide">               Desplazamiento una sola vez
   <marquee behavior="alternate">             Desplazamiento rebotando

El código completo se muestra a continuación:




El resultado de la página es el siguiente:




7. Elabore una fracción de código que al dar clic sobre los vínculos vaya a las
siguientes páginas:

   •   A la universidad Nacional
   •   A un buscador (Por ejemplo Google)
   •   A un archivo de Word
Vamos al bloc de notas y creamos nuestra página con el nombre de
ejercicio3.html.

Primer punto:
<p align="center"><a href="http://www.unad.edu.co">Visita la Universidad
Nacional a distancia</a>

Segundo punto:
<p align="center"><a href="http://www.google.com">Busca cualquier cosa desde
acá</a>

Tercer punto: Este hipervínculo nos lleva a un documento de Word de nombre
tarea.doc que se encuentra ubicado en la unidad C, en una carpeta de nombre
Actividades, por esa razón se debe colocar toda la ruta del archivo.

<p align="center"><a href="file:///C|/Actividades/tarea.doc">Revisa tu tarea</a>




El resultado de la página es el siguiente:




8. Que hace la siguiente fracción de código:

<ul>
<li type=circle> Armenia </li>
<li type=square> Salento </li>
</ul>

<ol>
<li>Buenavista</li>
<li>La Tebaida</li>
</ol>




Primer punto:
Listas con viñetas círculo y cuadrado

   o   Armenia

      Salento

Segundo punto:
Listas numeradas

   1. Buenavista
   2. La Tebaida


9. Ejecute el siguiente código y comente que hace:

<B><FONT COLOR=#800000>F</FONT><FONT COLOR=#FFFFFF>O</FONT><FONT
COLOR=#000080>N</FONT><FONT COLOR=#008000>T</FONT>
<FONT COLOR=#00FFFF>C</FONT><FONT COLOR=#FF0000>O</FONT>
<FONT COLOR=#000080>L</FONT><FONT COLOR=#800080>O</FONT>
<FONT COLOR=#FFFF00>R</FONT><FONT
COLOR=#0000FF>S</FONT></B><P>




Nota: Guarde el archivo con el nombre de ejercicio4.html


110. Elabore la siguiente lista de glosario

INTERNET
Red mundial de computadores

HTML
Conjunto de códigos para crear una página Web

<BODY>
Cuerpo de una página Web, allí se escriben todas las instrucciones.

Vamos al bloc de notas y creamos nuestra página con el nombre de
ejercicio5.html.

111. Elabore su hoja de vida en tres archivos de HTML llamados
2
3Inf_academica, Inf_laboral y Inf_general que tengan relación con su hoja de vida
y cree adicionalmente una página llamada menu.html desde la cual al dar clic
sobre un enlace le permita ver cada página.
Haga los formatos a su gusto y aplique lo que considere necesario (imágenes,
animaciones, videos, colores de letra, tamaños, movimientos del texto, entre
otros).

Vamos al bloc de notas y creamos nuestra página con su nombre
andresgomez.html.

Crearemos otra página donde coloque su experiencia profesional.
En otra página coloque su formación académica.
En otra página coloque sus conocimientos informáticos.

12. Elabore una tabla de Cuatro columnas por cuatro filas, cada celda debe tener
una imagen y al dar clic sobre ésta aparezca en una nueva ventana con la imagen
ampliada y haciendo un pequeño comentario de ella.

Vamos al bloc de notas y creamos nuestra página con el nombre de
ejercicio6.html. Recuerden que las imágenes deben estar en la misma carpeta de
los archivos html.

Debemos crear 2 páginas:

Primera página:
Como ejemplo lo hacemos para una sola imagen pero ustedes deben hacerlo para
todos los campos de la tabla.

Debemos colocar la imagen como hipervínculo a otra página.

El código es el siguiente:
Así se verá nuestra primera página:




Segunda página:
En esta página la imagen se debe colocar más grande, con su respectivo
comentario y un hipervínculo que la lleve a la primera página.
El código es el siguiente:




Así se verá nuestra primera página:
114. Cree un frame con tres secciones así:
Tutorial ejercicio 1

Más contenido relacionado

La actualidad más candente (19)

Guia2 html
Guia2 htmlGuia2 html
Guia2 html
 
Práctica 3 cómo crear un blog
Práctica 3   cómo crear un blogPráctica 3   cómo crear un blog
Práctica 3 cómo crear un blog
 
Presentacion3 Webquest
Presentacion3 WebquestPresentacion3 Webquest
Presentacion3 Webquest
 
Dreamweaver mx-practicas
Dreamweaver mx-practicasDreamweaver mx-practicas
Dreamweaver mx-practicas
 
Frontpage
FrontpageFrontpage
Frontpage
 
Manual de DreamWeaver
Manual de DreamWeaverManual de DreamWeaver
Manual de DreamWeaver
 
Moodle2 Editor
Moodle2 EditorMoodle2 Editor
Moodle2 Editor
 
Moodle2 Editor
Moodle2 EditorMoodle2 Editor
Moodle2 Editor
 
Practicakompozer 3
Practicakompozer 3Practicakompozer 3
Practicakompozer 3
 
Manual html
Manual htmlManual html
Manual html
 
DREAMWEAVER
DREAMWEAVERDREAMWEAVER
DREAMWEAVER
 
Dreamweaver 8
Dreamweaver 8Dreamweaver 8
Dreamweaver 8
 
Introducción a Dreamweaver cs5
Introducción a Dreamweaver cs5Introducción a Dreamweaver cs5
Introducción a Dreamweaver cs5
 
Dreamweaver cs5
Dreamweaver cs5Dreamweaver cs5
Dreamweaver cs5
 
Como programar en htmil 5
Como programar en htmil 5Como programar en htmil 5
Como programar en htmil 5
 
Manual Powerpoint
Manual PowerpointManual Powerpoint
Manual Powerpoint
 
Taller de Dreamweaver 8
Taller de Dreamweaver 8Taller de Dreamweaver 8
Taller de Dreamweaver 8
 
Curso HTML desde Cero - Capítulo 1
Curso HTML desde Cero - Capítulo 1Curso HTML desde Cero - Capítulo 1
Curso HTML desde Cero - Capítulo 1
 
Front Page ==
Front Page ==Front Page ==
Front Page ==
 

Destacado

Etiquetas de imagen e hipervínculo
Etiquetas de imagen e hipervínculoEtiquetas de imagen e hipervínculo
Etiquetas de imagen e hipervínculoLucesita Mzm
 
Capacidades físicas condicionales son
Capacidades físicas condicionales sonCapacidades físicas condicionales son
Capacidades físicas condicionales sonJose Miguel M
 
Presentación: Capacidades físicas
Presentación: Capacidades físicasPresentación: Capacidades físicas
Presentación: Capacidades físicasdedsireeitorres
 
Cualidades Físicas Básicas y Calentamiento
Cualidades Físicas Básicas y CalentamientoCualidades Físicas Básicas y Calentamiento
Cualidades Físicas Básicas y CalentamientoAlberto García
 
Capacidades fisicas condicionales
Capacidades fisicas condicionalesCapacidades fisicas condicionales
Capacidades fisicas condicionalesFernando R
 
Cualidades fisicas y sus metodos de desarrollo power point
Cualidades fisicas y sus metodos de desarrollo power pointCualidades fisicas y sus metodos de desarrollo power point
Cualidades fisicas y sus metodos de desarrollo power pointDavidns
 
Capacidades Físicas
Capacidades FísicasCapacidades Físicas
Capacidades FísicasDGIREDeportes
 
Diapositivas derecho de familia iv
Diapositivas derecho de familia ivDiapositivas derecho de familia iv
Diapositivas derecho de familia ivedgardoquispe
 
Estilos de vida saludables y pausas activas
Estilos de vida saludables y pausas activasEstilos de vida saludables y pausas activas
Estilos de vida saludables y pausas activasGloria Daza
 
Calentamiento Y Capacidades Fisicas Basicas
Calentamiento Y Capacidades Fisicas BasicasCalentamiento Y Capacidades Fisicas Basicas
Calentamiento Y Capacidades Fisicas Basicasraulinef
 

Destacado (18)

Etiquetas de imagen e hipervínculo
Etiquetas de imagen e hipervínculoEtiquetas de imagen e hipervínculo
Etiquetas de imagen e hipervínculo
 
Trabajo complato de word
Trabajo complato de wordTrabajo complato de word
Trabajo complato de word
 
Pausas activas (1) (1)
Pausas activas (1) (1)Pausas activas (1) (1)
Pausas activas (1) (1)
 
Solución Pre-Icfes
Solución Pre-IcfesSolución Pre-Icfes
Solución Pre-Icfes
 
Taller exel informatica completo
Taller exel informatica completoTaller exel informatica completo
Taller exel informatica completo
 
Cualidades Fisicas Basicas
Cualidades Fisicas BasicasCualidades Fisicas Basicas
Cualidades Fisicas Basicas
 
Diapositivas tesis final
Diapositivas tesis finalDiapositivas tesis final
Diapositivas tesis final
 
Senderismo
SenderismoSenderismo
Senderismo
 
Capacidades físicas condicionales son
Capacidades físicas condicionales sonCapacidades físicas condicionales son
Capacidades físicas condicionales son
 
Presentación: Capacidades físicas
Presentación: Capacidades físicasPresentación: Capacidades físicas
Presentación: Capacidades físicas
 
Cualidades Físicas Básicas y Calentamiento
Cualidades Físicas Básicas y CalentamientoCualidades Físicas Básicas y Calentamiento
Cualidades Físicas Básicas y Calentamiento
 
Capacidades fisicas condicionales
Capacidades fisicas condicionalesCapacidades fisicas condicionales
Capacidades fisicas condicionales
 
Cualidades fisicas y sus metodos de desarrollo power point
Cualidades fisicas y sus metodos de desarrollo power pointCualidades fisicas y sus metodos de desarrollo power point
Cualidades fisicas y sus metodos de desarrollo power point
 
Capacidades Físicas
Capacidades FísicasCapacidades Físicas
Capacidades Físicas
 
Cualidades fisicas básicas
Cualidades fisicas básicasCualidades fisicas básicas
Cualidades fisicas básicas
 
Diapositivas derecho de familia iv
Diapositivas derecho de familia ivDiapositivas derecho de familia iv
Diapositivas derecho de familia iv
 
Estilos de vida saludables y pausas activas
Estilos de vida saludables y pausas activasEstilos de vida saludables y pausas activas
Estilos de vida saludables y pausas activas
 
Calentamiento Y Capacidades Fisicas Basicas
Calentamiento Y Capacidades Fisicas BasicasCalentamiento Y Capacidades Fisicas Basicas
Calentamiento Y Capacidades Fisicas Basicas
 

Similar a Tutorial ejercicio 1

Similar a Tutorial ejercicio 1 (20)

Escuela Abierta - Taller de Html
Escuela Abierta - Taller de HtmlEscuela Abierta - Taller de Html
Escuela Abierta - Taller de Html
 
Expo html alexandra
Expo html alexandraExpo html alexandra
Expo html alexandra
 
Html
HtmlHtml
Html
 
Expo html alexandra
Expo html alexandraExpo html alexandra
Expo html alexandra
 
Crea una pagina web
Crea una  pagina webCrea una  pagina web
Crea una pagina web
 
Expo html alexandra
Expo html alexandraExpo html alexandra
Expo html alexandra
 
Expo html alexa
Expo html alexaExpo html alexa
Expo html alexa
 
html
htmlhtml
html
 
Expo html alexandra
Expo html alexandraExpo html alexandra
Expo html alexandra
 
Expo html alexandra
Expo html alexandraExpo html alexandra
Expo html alexandra
 
Expo html alexandra
Expo html alexandraExpo html alexandra
Expo html alexandra
 
Practico html
Practico htmlPractico html
Practico html
 
Practico html
Practico htmlPractico html
Practico html
 
Curso html
Curso htmlCurso html
Curso html
 
Escuela Abierta - Taller de Html
Escuela Abierta - Taller de HtmlEscuela Abierta - Taller de Html
Escuela Abierta - Taller de Html
 
Práctica Informática - Archivo PDF
Práctica Informática - Archivo PDF Práctica Informática - Archivo PDF
Práctica Informática - Archivo PDF
 
Kevin veloza ne final de año 901 html
Kevin veloza ne final de año 901 htmlKevin veloza ne final de año 901 html
Kevin veloza ne final de año 901 html
 
Adjuntos fichero 143604
Adjuntos fichero 143604Adjuntos fichero 143604
Adjuntos fichero 143604
 
Ejercicios
EjerciciosEjercicios
Ejercicios
 
Presentacinhtml 091121100213-phpapp02
Presentacinhtml 091121100213-phpapp02Presentacinhtml 091121100213-phpapp02
Presentacinhtml 091121100213-phpapp02
 

Más de Kelly Johanna Santos (10)

Hoja de kelly santos
Hoja de kelly santosHoja de kelly santos
Hoja de kelly santos
 
Carta seminario de grado
Carta seminario de gradoCarta seminario de grado
Carta seminario de grado
 
Tabla ascii, fun del teclado
Tabla ascii, fun del tecladoTabla ascii, fun del teclado
Tabla ascii, fun del teclado
 
Diapositivas illustraitor
Diapositivas illustraitorDiapositivas illustraitor
Diapositivas illustraitor
 
Trabajo escrito
Trabajo escritoTrabajo escrito
Trabajo escrito
 
Taller exel informatica completo
Taller exel informatica completoTaller exel informatica completo
Taller exel informatica completo
 
Cartas combinadas trabajo
Cartas combinadas trabajoCartas combinadas trabajo
Cartas combinadas trabajo
 
Talleres
TalleresTalleres
Talleres
 
Operaciones trabajo excel
Operaciones trabajo excelOperaciones trabajo excel
Operaciones trabajo excel
 
Ejemplo grafico estadistico
Ejemplo grafico estadisticoEjemplo grafico estadistico
Ejemplo grafico estadistico
 

Último

Ejercicio 1 periodo 2 de Tecnología 2024
Ejercicio 1 periodo 2 de Tecnología 2024Ejercicio 1 periodo 2 de Tecnología 2024
Ejercicio 1 periodo 2 de Tecnología 2024NicolleAndrade7
 
herramientas web para estudiantes interesados en el tema
herramientas web para estudiantes interesados en el temaherramientas web para estudiantes interesados en el tema
herramientas web para estudiantes interesados en el temaJadeVilcscordova
 
Imágenes digitales: Calidad de la información
Imágenes digitales: Calidad de la informaciónImágenes digitales: Calidad de la información
Imágenes digitales: Calidad de la informaciónUniversidad de Sonora
 
Navegadores de internet - Nuevas Tecnologías de la Información y la Comunicación
Navegadores de internet - Nuevas Tecnologías de la Información y la ComunicaciónNavegadores de internet - Nuevas Tecnologías de la Información y la Comunicación
Navegadores de internet - Nuevas Tecnologías de la Información y la ComunicaciónAntonia Yamilet Perez Palomares
 
el uso de las TIC en la vida cotidiana.pptx
el uso de las TIC en la vida cotidiana.pptxel uso de las TIC en la vida cotidiana.pptx
el uso de las TIC en la vida cotidiana.pptx221112876
 
De Olmos Santiago_Dolores _ M1S3AI6.pptx
De Olmos Santiago_Dolores _ M1S3AI6.pptxDe Olmos Santiago_Dolores _ M1S3AI6.pptx
De Olmos Santiago_Dolores _ M1S3AI6.pptxdoloresolmosantiago
 
Tarea_sesion_15_Reportes Maestro - Detalle con el uso de AJAX.pptx
Tarea_sesion_15_Reportes Maestro - Detalle con el uso de AJAX.pptxTarea_sesion_15_Reportes Maestro - Detalle con el uso de AJAX.pptx
Tarea_sesion_15_Reportes Maestro - Detalle con el uso de AJAX.pptxVICTORMANUELBEASAGUI
 
innovacion banking & warehouse 2024 blog
innovacion banking & warehouse 2024 bloginnovacion banking & warehouse 2024 blog
innovacion banking & warehouse 2024 blogManuel Diaz
 
Redes Neuronales profundas convolucionales CNN ́s-1.pdf
Redes Neuronales profundas convolucionales CNN ́s-1.pdfRedes Neuronales profundas convolucionales CNN ́s-1.pdf
Redes Neuronales profundas convolucionales CNN ́s-1.pdfJosAndrRosarioVzquez
 
Desarrollo del Dominio del Internet - Estrada
Desarrollo del Dominio del Internet - EstradaDesarrollo del Dominio del Internet - Estrada
Desarrollo del Dominio del Internet - EstradaRicardoEstrada90
 
10°8 - Avances tecnologicos del siglo XXI 10-8
10°8 - Avances tecnologicos del siglo XXI 10-810°8 - Avances tecnologicos del siglo XXI 10-8
10°8 - Avances tecnologicos del siglo XXI 10-8antoniopalmieriluna
 
Función del analizador léxico.pdf presentacion
Función del analizador léxico.pdf presentacionFunción del analizador léxico.pdf presentacion
Función del analizador léxico.pdf presentacionEmanuelMuoz11
 
AVANCES TECNOLOGICOS DEL SIGLO XXI. 10-08..pptx
AVANCES TECNOLOGICOS  DEL SIGLO XXI. 10-08..pptxAVANCES TECNOLOGICOS  DEL SIGLO XXI. 10-08..pptx
AVANCES TECNOLOGICOS DEL SIGLO XXI. 10-08..pptxdulcemonterroza
 
Chat GPT para la educación Latinoamerica
Chat GPT para la educación LatinoamericaChat GPT para la educación Latinoamerica
Chat GPT para la educación LatinoamericaEdwinGarca59
 
Electricidad Libro compendio de temas estudiados.docx
Electricidad Libro compendio de temas estudiados.docxElectricidad Libro compendio de temas estudiados.docx
Electricidad Libro compendio de temas estudiados.docxCsarNlsonMrquezContr
 
VelderrainPerez_Paola_M1C1G63-097.pptx. LAS TiC
VelderrainPerez_Paola_M1C1G63-097.pptx. LAS TiCVelderrainPerez_Paola_M1C1G63-097.pptx. LAS TiC
VelderrainPerez_Paola_M1C1G63-097.pptx. LAS TiC6dwwcgtpfx
 
¡Ya basta! Sanidad Interior - Angela Kellenberger.pdf
¡Ya basta! Sanidad Interior - Angela Kellenberger.pdf¡Ya basta! Sanidad Interior - Angela Kellenberger.pdf
¡Ya basta! Sanidad Interior - Angela Kellenberger.pdfjuan23xpx
 
JORNADA INTELIGENCIA ARTIFICIAL Y REALIDAD VIRTUAL
JORNADA INTELIGENCIA ARTIFICIAL Y REALIDAD VIRTUALJORNADA INTELIGENCIA ARTIFICIAL Y REALIDAD VIRTUAL
JORNADA INTELIGENCIA ARTIFICIAL Y REALIDAD VIRTUALGuadalinfoHuscarGuad
 
PRÁCTICA Nº 4: “Análisis de secuencias del ADN con el software BioEdit y uso ...
PRÁCTICA Nº 4: “Análisis de secuencias del ADN con el software BioEdit y uso ...PRÁCTICA Nº 4: “Análisis de secuencias del ADN con el software BioEdit y uso ...
PRÁCTICA Nº 4: “Análisis de secuencias del ADN con el software BioEdit y uso ...dramosbrise1403
 
editorial de informática de los sueños.docx
editorial de informática de los sueños.docxeditorial de informática de los sueños.docx
editorial de informática de los sueños.docxssusere34b451
 

Último (20)

Ejercicio 1 periodo 2 de Tecnología 2024
Ejercicio 1 periodo 2 de Tecnología 2024Ejercicio 1 periodo 2 de Tecnología 2024
Ejercicio 1 periodo 2 de Tecnología 2024
 
herramientas web para estudiantes interesados en el tema
herramientas web para estudiantes interesados en el temaherramientas web para estudiantes interesados en el tema
herramientas web para estudiantes interesados en el tema
 
Imágenes digitales: Calidad de la información
Imágenes digitales: Calidad de la informaciónImágenes digitales: Calidad de la información
Imágenes digitales: Calidad de la información
 
Navegadores de internet - Nuevas Tecnologías de la Información y la Comunicación
Navegadores de internet - Nuevas Tecnologías de la Información y la ComunicaciónNavegadores de internet - Nuevas Tecnologías de la Información y la Comunicación
Navegadores de internet - Nuevas Tecnologías de la Información y la Comunicación
 
el uso de las TIC en la vida cotidiana.pptx
el uso de las TIC en la vida cotidiana.pptxel uso de las TIC en la vida cotidiana.pptx
el uso de las TIC en la vida cotidiana.pptx
 
De Olmos Santiago_Dolores _ M1S3AI6.pptx
De Olmos Santiago_Dolores _ M1S3AI6.pptxDe Olmos Santiago_Dolores _ M1S3AI6.pptx
De Olmos Santiago_Dolores _ M1S3AI6.pptx
 
Tarea_sesion_15_Reportes Maestro - Detalle con el uso de AJAX.pptx
Tarea_sesion_15_Reportes Maestro - Detalle con el uso de AJAX.pptxTarea_sesion_15_Reportes Maestro - Detalle con el uso de AJAX.pptx
Tarea_sesion_15_Reportes Maestro - Detalle con el uso de AJAX.pptx
 
innovacion banking & warehouse 2024 blog
innovacion banking & warehouse 2024 bloginnovacion banking & warehouse 2024 blog
innovacion banking & warehouse 2024 blog
 
Redes Neuronales profundas convolucionales CNN ́s-1.pdf
Redes Neuronales profundas convolucionales CNN ́s-1.pdfRedes Neuronales profundas convolucionales CNN ́s-1.pdf
Redes Neuronales profundas convolucionales CNN ́s-1.pdf
 
Desarrollo del Dominio del Internet - Estrada
Desarrollo del Dominio del Internet - EstradaDesarrollo del Dominio del Internet - Estrada
Desarrollo del Dominio del Internet - Estrada
 
10°8 - Avances tecnologicos del siglo XXI 10-8
10°8 - Avances tecnologicos del siglo XXI 10-810°8 - Avances tecnologicos del siglo XXI 10-8
10°8 - Avances tecnologicos del siglo XXI 10-8
 
Función del analizador léxico.pdf presentacion
Función del analizador léxico.pdf presentacionFunción del analizador léxico.pdf presentacion
Función del analizador léxico.pdf presentacion
 
AVANCES TECNOLOGICOS DEL SIGLO XXI. 10-08..pptx
AVANCES TECNOLOGICOS  DEL SIGLO XXI. 10-08..pptxAVANCES TECNOLOGICOS  DEL SIGLO XXI. 10-08..pptx
AVANCES TECNOLOGICOS DEL SIGLO XXI. 10-08..pptx
 
Chat GPT para la educación Latinoamerica
Chat GPT para la educación LatinoamericaChat GPT para la educación Latinoamerica
Chat GPT para la educación Latinoamerica
 
Electricidad Libro compendio de temas estudiados.docx
Electricidad Libro compendio de temas estudiados.docxElectricidad Libro compendio de temas estudiados.docx
Electricidad Libro compendio de temas estudiados.docx
 
VelderrainPerez_Paola_M1C1G63-097.pptx. LAS TiC
VelderrainPerez_Paola_M1C1G63-097.pptx. LAS TiCVelderrainPerez_Paola_M1C1G63-097.pptx. LAS TiC
VelderrainPerez_Paola_M1C1G63-097.pptx. LAS TiC
 
¡Ya basta! Sanidad Interior - Angela Kellenberger.pdf
¡Ya basta! Sanidad Interior - Angela Kellenberger.pdf¡Ya basta! Sanidad Interior - Angela Kellenberger.pdf
¡Ya basta! Sanidad Interior - Angela Kellenberger.pdf
 
JORNADA INTELIGENCIA ARTIFICIAL Y REALIDAD VIRTUAL
JORNADA INTELIGENCIA ARTIFICIAL Y REALIDAD VIRTUALJORNADA INTELIGENCIA ARTIFICIAL Y REALIDAD VIRTUAL
JORNADA INTELIGENCIA ARTIFICIAL Y REALIDAD VIRTUAL
 
PRÁCTICA Nº 4: “Análisis de secuencias del ADN con el software BioEdit y uso ...
PRÁCTICA Nº 4: “Análisis de secuencias del ADN con el software BioEdit y uso ...PRÁCTICA Nº 4: “Análisis de secuencias del ADN con el software BioEdit y uso ...
PRÁCTICA Nº 4: “Análisis de secuencias del ADN con el software BioEdit y uso ...
 
editorial de informática de los sueños.docx
editorial de informática de los sueños.docxeditorial de informática de los sueños.docx
editorial de informática de los sueños.docx
 

Tutorial ejercicio 1

  • 1. HTML 3. Explique que hacen las siguientes etiquetas: ETIQUETAS FUNCION <HTML> Indica que se va a escribir código HTML <HEAD> Cabecera del documento <TITLE> Coloca titulo al documento <BODY> Cuerpo del documento. Aquí se pone el verdadero contenido de la página <BGCOLOR> Para dar color al fondo de la página <TEXT> Para darle características al texto <LINK> Para darle características a los hipervínculos 4. Escriba un segmento de código donde muestre la aplicación de las etiquetas anteriores. Para comenzar debemos abrir nuestro bloc de notas, vamos a Archivo > Guardar.
  • 2. Debemos crear una carpeta donde guardaremos todas nuestras páginas realizadas. En nuestro caso la llamaremos html. Ahora guardamos el documento con el nombre de ejercicio1.html. Damos clic en Guardar. Cerramos el bloc de notas. Ahora vamos a nuestra carpeta html y observamos que el archivo que acabamos de crear aparece con el icono de nuestro navegador, en este caso Internet Explorer.
  • 3. Damos doble clic en el archivo y observamos una página en blanco. Vamos a introducir el código html a nuestra página, para esto vamos al menú Ver > Código Fuente.
  • 4. Aparece el bloc de notas con el archivo que habíamos creado anteriormente. Colocamos un código que cumpla con los requisitos del ejercicio. En nuestro caso colocaremos el siguiente. Recuerde que las etiquetas <html> </html> indican que lo que va entre ellas es código html. Después encontramos las etiquetas <head> </head> que es el encabezado de la página, dentro de esas etiquetas encontramos <title> </title> que me indica el título que va a llevar nuestra página web. El body lleva la instrucción bgcolor para darle un color al fondo, este color va en código hexadecimal #00ffff que en nuestro caso representa un color azul aguamarina. Ahora presentamos la paleta de colores para escojan es que más le agrade.
  • 5. Observamos que en la parte superior aparece el texto que colocamos en las etiquetas title. En la instrucción text colocamos el color por defecto del texto de nuestra página que en nuestro caso será el rojo. En link se da el color de los hipervínculos que por norma debe ser azul. Recordemos que con align alineamos el texto como queramos, en nuestro caso el texto será centrado. Colocamos un hipervínculo para observar su color por defecto, al hacer clic sobre este nos llevará a la página de Hotmail. Guardamos este documento y vamos a nuestra página web, presionamos F5 para actualizar y observar los cambios realizados.
  • 6. 5. Explique que hace las siguientes líneas de código html: Nota: recuerde probarlas en una página web para practicar y observar los resultados. 1• <FONT FACE=”Times New Roman” SIZE=”3” COLOR=”Yellow”></FONT> 2Coloca características al texto como tipo de fuente (Times New Roman), tamaño (3) y color (amarillo). 1• <A HREF="copia.html" TARGET="principal"> Escribe un hipervínculo hacia una página que se encuentra en nuestra carpeta, apareciendo la página en el marco principal de esta. • <A HREF=dos.jpg><IMG SRC=uno.gif></A> Hipervínculo hacia una imagen .jpg al dar clic en una imagen .gif • <A HREF=#top>Arriba</A><br> Hipervínculo que nos lleva a la parte superior de nuestra página. 1• <HR WIDTH=50% SIZE=20 ALIGN=left COLOR=navy NOSHADE> 2Traza una línea de separación horizontal, de 50% de ancho de la pantalla, tamaño (grosor) de 20, alineada a la izquierda, con color azul y sin sombra. 6. Escriba un segmento de código donde: • Cargue una imagen de extensión .gif que se debe colocar en las misma carpeta donde están grabados los archivos html, el ancho y la altura son de 50, no tiene borde y que cuando alguien mueva el mouse sobre ella aparezca un mensaje que diga ¨Bienvenido¨.
  • 7. Busque un gif animado y cárguelo en esta misma página. • Elabore un marquee a su gusto que quede debajo en esta misma página. Vamos al bloc de notas y creamos nuestra página con el nombre de ejercicio2.html. Primer punto: Ahora escribimos las siguientes líneas de código en el body para cumplir con el primer punto de nuestro ejercicio. <p align="center"><img src="./YOBI.gif" widht="50" height="50" border="0" alt="Bienvenido"> ETIQUETA FUNCIÓN align="center" Centra la imagen Src="./YOBI.gif" Nombre de la imagen widht="50" Ancho de la imagen height="50" Alto de la imagen border="0" Sin borde alt="Bienvenido" Muestra un texto cuando se mueve el Mouse sobre la imagen Segundo punto: cargue el .gif animado de la misma manera como en el Primer punto. Recuerde que el .gif debe ser animado. Tercer punto: Escribimos las siguientes líneas de código en el body para cumplir con el tercer punto de nuestro ejercicio. <p><b><marquee behavior="alternate" bgcolor="#FFFF00"><font color="#008000">TODOS SUS PROBLEMAS TIENEN SOLUCION</font></marquee></p> ETIQUETA FUNCIÓN <p> Nuevo párrafo <b> Texto en Negrita marquee Marquesina bgcolor="#FFFF00" Color de la marquesina font color="#008000" Color de la letra de la marquesina Si utilizamos la etiqueta <marquee> sola no existe ningún problema, pero podemos utilizar etiquetas adicionales que le darán otro efectos como se muestra a continuación:
  • 8. ETIQUETA FUNCIÓN <marquee behavior="slide"> Desplazamiento una sola vez <marquee behavior="alternate"> Desplazamiento rebotando El código completo se muestra a continuación: El resultado de la página es el siguiente: 7. Elabore una fracción de código que al dar clic sobre los vínculos vaya a las siguientes páginas: • A la universidad Nacional • A un buscador (Por ejemplo Google) • A un archivo de Word
  • 9. Vamos al bloc de notas y creamos nuestra página con el nombre de ejercicio3.html. Primer punto: <p align="center"><a href="http://www.unad.edu.co">Visita la Universidad Nacional a distancia</a> Segundo punto: <p align="center"><a href="http://www.google.com">Busca cualquier cosa desde acá</a> Tercer punto: Este hipervínculo nos lleva a un documento de Word de nombre tarea.doc que se encuentra ubicado en la unidad C, en una carpeta de nombre Actividades, por esa razón se debe colocar toda la ruta del archivo. <p align="center"><a href="file:///C|/Actividades/tarea.doc">Revisa tu tarea</a> El resultado de la página es el siguiente: 8. Que hace la siguiente fracción de código: <ul> <li type=circle> Armenia </li>
  • 10. <li type=square> Salento </li> </ul> <ol> <li>Buenavista</li> <li>La Tebaida</li> </ol> Primer punto: Listas con viñetas círculo y cuadrado o Armenia  Salento Segundo punto: Listas numeradas 1. Buenavista 2. La Tebaida 9. Ejecute el siguiente código y comente que hace: <B><FONT COLOR=#800000>F</FONT><FONT COLOR=#FFFFFF>O</FONT><FONT COLOR=#000080>N</FONT><FONT COLOR=#008000>T</FONT>
  • 11. <FONT COLOR=#00FFFF>C</FONT><FONT COLOR=#FF0000>O</FONT> <FONT COLOR=#000080>L</FONT><FONT COLOR=#800080>O</FONT> <FONT COLOR=#FFFF00>R</FONT><FONT COLOR=#0000FF>S</FONT></B><P> Nota: Guarde el archivo con el nombre de ejercicio4.html 110. Elabore la siguiente lista de glosario INTERNET Red mundial de computadores HTML Conjunto de códigos para crear una página Web <BODY> Cuerpo de una página Web, allí se escriben todas las instrucciones. Vamos al bloc de notas y creamos nuestra página con el nombre de ejercicio5.html. 111. Elabore su hoja de vida en tres archivos de HTML llamados 2 3Inf_academica, Inf_laboral y Inf_general que tengan relación con su hoja de vida y cree adicionalmente una página llamada menu.html desde la cual al dar clic sobre un enlace le permita ver cada página.
  • 12. Haga los formatos a su gusto y aplique lo que considere necesario (imágenes, animaciones, videos, colores de letra, tamaños, movimientos del texto, entre otros). Vamos al bloc de notas y creamos nuestra página con su nombre andresgomez.html. Crearemos otra página donde coloque su experiencia profesional. En otra página coloque su formación académica. En otra página coloque sus conocimientos informáticos. 12. Elabore una tabla de Cuatro columnas por cuatro filas, cada celda debe tener una imagen y al dar clic sobre ésta aparezca en una nueva ventana con la imagen ampliada y haciendo un pequeño comentario de ella. Vamos al bloc de notas y creamos nuestra página con el nombre de ejercicio6.html. Recuerden que las imágenes deben estar en la misma carpeta de los archivos html. Debemos crear 2 páginas: Primera página: Como ejemplo lo hacemos para una sola imagen pero ustedes deben hacerlo para todos los campos de la tabla. Debemos colocar la imagen como hipervínculo a otra página. El código es el siguiente:
  • 13. Así se verá nuestra primera página: Segunda página:
  • 14. En esta página la imagen se debe colocar más grande, con su respectivo comentario y un hipervínculo que la lleve a la primera página. El código es el siguiente: Así se verá nuestra primera página:
  • 15. 114. Cree un frame con tres secciones así: