SlideShare una empresa de Scribd logo
1 de 17
Descargar para leer sin conexión
UNIVERSIDAD ISRAEL
CIENCIAS DE LA INGENIERÍA
CARRERA DE SISTEMAS DE INFORMACIÓN
PLATAFORMAS DE DESARROLLO 2
SEMESTRE 2021 B
LABORATORIO S1
TEMA: HTML
PROFESOR: Mg. Luis Fernando Aguas Bucheli
QUITO, 2021
Ciencias de la Ingeniería
Universidad Israel
Ciencias de la Ingeniería
Carrera de Sistemas de Información
1. TEMA: HTML
2. OBJETIVOS:
• Adquirir los conceptos básicos relacionados con HTML
• Reconocer las características de HTML
3. OBJETIVOS DE DESARROLLO SOSTENIBLE:
Indicador 4.7: De aquí a 2030, asegurar que todos los alumnos adquieran los conocimientos
teóricos y prácticos necesarios para promover el desarrollo sostenible, entre otras cosas
mediante la educación para el desarrollo sostenible y los estilos de vida sostenibles, los derechos
humanos, la igualdad de género, la promoción de una cultura de paz y no violencia, la ciudadanía
mundial y la valoración de la diversidad cultural y la contribución de la cultura al desarrollo
sostenible
4. INTRODUCCION:
HTML (Lenguaje de marcado de hipertexto) es el más básico componente de la Web. Define el
significado y la estructura del contenido web. Además de HTML, se utilizan otras tecnologías
generalmente para describir la apariencia/presentación de una página web (CSS) o la
funcionalidad/comportamiento (JavaScript.
"Hipertexto" se refiere a enlaces que conectan páginas web entre sí, ya sea dentro de un único
sitio web o entre sitios web. Los enlaces son un aspecto fundamental de la Web. Al cargar
contenido en Internet y vincularlo a páginas creadas por otras personas, te conviertes en un
participante activo en la «World Wide Web».
5. DESARROLLO:
En cualquier editor de texto, en este caso Notepad ++, haremos los siguiente:
• Confeccionar una página que muestre los nombres de 5 lenguajes de programación
separados por un guión.
<html>
<head>
Ciencias de la Ingeniería
Universidad Israel
Ciencias de la Ingeniería
Carrera de Sistemas de Información
</head>
<body>
PHP - Java - JavaScript - C -
C++ </body>
</html>
• Abrimos el editor:
• Guardamos
Ciencias de la Ingeniería
Universidad Israel
Ciencias de la Ingeniería
Carrera de Sistemas de Información
• Teniendo lo siguiente:
• Teniendo en el navegador:
Ciencias de la Ingeniería
Universidad Israel
Ciencias de la Ingeniería
Carrera de Sistemas de Información
• Confeccionar una página que contenga un título de primer nivel <h1> y luego dos títulos de
nivel <h2>. Definir un párrafo para cada título de segundo nivel.
<html>
<head>
</head>
<body>
<h1>Tipos de datos en MySQL</h1>
<h2>varchar</h2>
<p>
se usa para almacenar cadenas de caracteres. Una cadena es una secuencia de caracteres.
Se coloca
entre comillas (simples): 'Hola'.<br>
El tipo "varchar" define una cadena de longitud variable en la cual determinamos el máximo
de
caracteres. Puede guardar hasta 255 caracteres. Para almacenar cadenas de hasta 30
caracteres,
definimos un campo de tipo varchar(30).
</p>
<h2>int</h2>
<p>
Se usa para guardar valores numéricos enteros, de -2000000000 a 2000000000
aproximadamente. <br> Definimos campos de este tipo cuando queremos representar, por
ejemplo, cantidades.
</p>
</body>
</html>
• Abrimos el editor:
Ciencias de la Ingeniería
Universidad Israel
Ciencias de la Ingeniería
Carrera de Sistemas de Información
• Guardamos
• Teniendo lo siguiente:
Ciencias de la Ingeniería
Universidad Israel
Ciencias de la Ingeniería
Carrera de Sistemas de Información
• Teniendo en el navegador:
• Confeccionar una página que contenga cuatro anclas, luego definir cuatro hipervínculos que
se enlacen con dichas anclas.
<html>
<head>
</head>
<body>
<h1>Tutorial de MySQL</h1>
<a href="#introduccion">Introducción</a><br>
<a href="#mostrarbasedatos">show databases</a><br>
<a href="#creaciontabla">Creación de una tabla y mostrar sus campos</a><br>
<a href="#cargarregistros">Carga de registros a una tabla y su recuperación</a><br>
Ciencias de la Ingeniería
Universidad Israel
Ciencias de la Ingeniería
Carrera de Sistemas de Información
<a name="introduccion"></a>
<h2>Introducción</h2>
<p>
SQL, Structure Query Language (Lenguaje de Consulta Estructurado) es un lenguaje de
programacion para trabajar con base de datos relacionales como MySQL, Oracle, etc.<br>
MySQL es un interpretador de SQL, es un servidor de base de datos.<br></p>
<a name="mostrarbasedatos"></a>
<h2>show databases</h2>
<p>
Una base de datos es un conjunto de tablas.<br></p>
<a name="creaciontabla"></a>
<h2>Creación de una tabla y mostrar sus
campos</h2> <p>
Una base de datos almacena sus datos en tablas.<br></p>
<a name="cargarregistros"></a>
<h2>Carga de registros a una tabla y su
recuperación</h2> <p>
Usamos "insert into". Especificamos los nombres de los campos entre paréntesis y separados
por
comas y luego los valores para cada campo, también entre paréntesis y separados por
comas.<br>
</p>
</body>
</html>
• Abrimos el editor:
Ciencias de la Ingeniería
Universidad Israel
Ciencias de la Ingeniería
Carrera de Sistemas de Información
• Guardamos
• Teniendo lo siguiente:
• Teniendo en el navegador:
Ciencias de la Ingeniería
Universidad Israel
Ciencias de la Ingeniería
Carrera de Sistemas de Información
• Implementar una página que enumere una serie de países en una lista ordenada y luego en
cada país disponer una lista de hipervínculos de periódicos de dicho país.
<html>
<head>
</head>
<body>
<ol>
<li>Argentina
<ul>
<li><a href="http://www.lanacion.com.ar">La Nación</a></li>
<li><a href="http://www.clarin.com.ar">Clarín</a></li>
<li><a href="http://www.pagina12.com.ar">Página 12</a></li>
</ul>
</li>
<li>España
<ul>
<li><a href="http://www.elpais.es">El País
Digital</a></li> <li><a
href="http://www.abc.es">ABC</a></li>
<li><a href="http://www.elmundo.es">El Mundo</a></li>
</ul>
</li>
<li>México
<ul>
<li><a href="http://www.jornada.unam.mx">La Jornada</a></li>
<li><a href="http://www.el-universal.com.mx">El Universal</a></li>
</ul>
</li>
</ol>
</body>
Ciencias de la Ingeniería
Universidad Israel
Ciencias de la Ingeniería
Carrera de Sistemas de Información
</html>
• Abrimos el editor:
• Guardamos
Ciencias de la Ingeniería
Universidad Israel
Ciencias de la Ingeniería
Carrera de Sistemas de Información
• Teniendo lo siguiente:
• Teniendo en el navegador:
Ciencias de la Ingeniería
Universidad Israel
Ciencias de la Ingeniería
Carrera de Sistemas de Información
• Formularios:
Form1.html
<form action="ejemplo.php" method="get">
<p>Nombre: <input type="text" name="nombre" size="40"></p>
<p>Año de nacimiento: <input type="number" name="nacido"
min="1900"></p>
<p>Sexo:
<input type="radio" name="hm" value="h"> Hombre
<input type="radio" name="hm" value="m"> Mujer
</p>
<p>
<input type="submit" value="Enviar">
<input type="reset" value="Borrar">
</p>
</form>
Ciencias de la Ingeniería
Universidad Israel
Ciencias de la Ingeniería
Carrera de Sistemas de Información
Form2. Html
<p>Sexo:
<input type="radio" name="hm" value="h" required> Hombre
<input type="radio" name="hm" value="m"> Mujer
</p>
<p>Edad:
<input type="radio" name="edad" value="menor"> Menor
<input type="radio" name="edad" value="adulto" required> Adulto
</p>
Ciencias de la Ingeniería
Universidad Israel
Ciencias de la Ingeniería
Carrera de Sistemas de Información
Form3.html
<fieldset>
<legend>Datos personales</legend>
<p>Nombre: <input type="text" name="nombre" size="30"></p>
<p>Edad: <input type="number" name="edad"></p>
</fieldset>
<fieldset>
<legend>Cultura general</legend>
<p>Capital de Noruega:
<input type="radio" name="p1" value="1"> Copenhague
<input type="radio" name="p1" value="2"> Helsinki
<input type="radio" name="p1" value="3"> Oslo
Ciencias de la Ingeniería
Universidad Israel
Ciencias de la Ingeniería
Carrera de Sistemas de Información
</p>
<p>Fecha de la Revolución francesa:
<input type="radio" name="p2" value="1"> 1492
<input type="radio" name="p2" value="2"> 1789
<input type="radio" name="p2" value="3"> 1917
</p>
</fieldset>
Ciencias de la Ingeniería
Universidad Israel
Ciencias de la Ingeniería
Carrera de Sistemas de Información
6. BIBLIOGRAFIA:

Más contenido relacionado

La actualidad más candente (20)

Noe html poer
Noe html poerNoe html poer
Noe html poer
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Slideshare eddy
Slideshare eddySlideshare eddy
Slideshare eddy
 
codigos Html y css
codigos Html y csscodigos Html y css
codigos Html y css
 
Loslenguajesdemarcasdecontenidos imágenes mod1
Loslenguajesdemarcasdecontenidos imágenes mod1Loslenguajesdemarcasdecontenidos imágenes mod1
Loslenguajesdemarcasdecontenidos imágenes mod1
 
Diseño de páginas web
Diseño de páginas webDiseño de páginas web
Diseño de páginas web
 
Trabajo
TrabajoTrabajo
Trabajo
 
Tecnologia
Tecnologia Tecnologia
Tecnologia
 
HTML
HTMLHTML
HTML
 
Html
HtmlHtml
Html
 
unidad 7.1.1
unidad 7.1.1unidad 7.1.1
unidad 7.1.1
 
Leccion VI
Leccion VILeccion VI
Leccion VI
 
Gato html (2)
Gato html (2)Gato html (2)
Gato html (2)
 
Taller html
Taller htmlTaller html
Taller html
 
Erick
ErickErick
Erick
 
Html (ppt)
Html (ppt)Html (ppt)
Html (ppt)
 
Actividad 1 mooble
Actividad 1 moobleActividad 1 mooble
Actividad 1 mooble
 
Estructura de una pagina web HTML
Estructura de una pagina web HTMLEstructura de una pagina web HTML
Estructura de una pagina web HTML
 
relatoria
relatoriarelatoria
relatoria
 
ADA ADICIONAL
ADA ADICIONALADA ADICIONAL
ADA ADICIONAL
 

Similar a Ls1 pd2-210919171605

CMS - Metodología de trabajo EMEPE
CMS - Metodología de trabajo EMEPECMS - Metodología de trabajo EMEPE
CMS - Metodología de trabajo EMEPEFernando Feller
 
Mashups y bibliotecas: cómo elaborar guías temáticas con Netvibes
Mashups y bibliotecas: cómo elaborar guías temáticas con NetvibesMashups y bibliotecas: cómo elaborar guías temáticas con Netvibes
Mashups y bibliotecas: cómo elaborar guías temáticas con NetvibesSocialBiblio
 
Ejercicios_basicos_HTML18-19.pdf
Ejercicios_basicos_HTML18-19.pdfEjercicios_basicos_HTML18-19.pdf
Ejercicios_basicos_HTML18-19.pdfPelaezKevinHugo
 
Tics 4º eso bloque 5 publicacion y difusión de contenidos. ed donostiarra
Tics 4º eso bloque 5 publicacion y difusión de contenidos. ed donostiarraTics 4º eso bloque 5 publicacion y difusión de contenidos. ed donostiarra
Tics 4º eso bloque 5 publicacion y difusión de contenidos. ed donostiarrablogjuan2012
 
Páginas_web guia didactica.pdf
Páginas_web guia didactica.pdfPáginas_web guia didactica.pdf
Páginas_web guia didactica.pdfTEMPORAL13
 
Guia 1 de html creacion de documentos html
Guia 1 de html   creacion de documentos htmlGuia 1 de html   creacion de documentos html
Guia 1 de html creacion de documentos htmllisvancelis
 
Guía Practica conexión BD 2021
Guía Practica conexión BD  2021Guía Practica conexión BD  2021
Guía Practica conexión BD 2021lissette_torrealba
 
El origen-de-las-paginas-web-final
El origen-de-las-paginas-web-finalEl origen-de-las-paginas-web-final
El origen-de-las-paginas-web-finalLuis Wuicho Angeles
 
Presentación Final
Presentación FinalPresentación Final
Presentación Finalcazel_269
 
440 material impreso uc059-3 desarrollo de pagina web y recursos multimedia (1)
440 material impreso uc059-3 desarrollo de pagina web y recursos multimedia (1)440 material impreso uc059-3 desarrollo de pagina web y recursos multimedia (1)
440 material impreso uc059-3 desarrollo de pagina web y recursos multimedia (1)wandelsonwww
 
Curso_de_Dreamweaver.pdf
Curso_de_Dreamweaver.pdfCurso_de_Dreamweaver.pdf
Curso_de_Dreamweaver.pdfBrisyAndEstra
 

Similar a Ls1 pd2-210919171605 (20)

CMS - Metodología de trabajo EMEPE
CMS - Metodología de trabajo EMEPECMS - Metodología de trabajo EMEPE
CMS - Metodología de trabajo EMEPE
 
Mashups y bibliotecas: cómo elaborar guías temáticas con Netvibes
Mashups y bibliotecas: cómo elaborar guías temáticas con NetvibesMashups y bibliotecas: cómo elaborar guías temáticas con Netvibes
Mashups y bibliotecas: cómo elaborar guías temáticas con Netvibes
 
Ejercicios_basicos_HTML18-19.pdf
Ejercicios_basicos_HTML18-19.pdfEjercicios_basicos_HTML18-19.pdf
Ejercicios_basicos_HTML18-19.pdf
 
Tics 4º eso bloque 5 publicacion y difusión de contenidos. ed donostiarra
Tics 4º eso bloque 5 publicacion y difusión de contenidos. ed donostiarraTics 4º eso bloque 5 publicacion y difusión de contenidos. ed donostiarra
Tics 4º eso bloque 5 publicacion y difusión de contenidos. ed donostiarra
 
Ed sw
Ed swEd sw
Ed sw
 
Taller de arquitectura web
Taller de arquitectura webTaller de arquitectura web
Taller de arquitectura web
 
HTML
HTMLHTML
HTML
 
Páginas_web guia didactica.pdf
Páginas_web guia didactica.pdfPáginas_web guia didactica.pdf
Páginas_web guia didactica.pdf
 
Alany01
Alany01Alany01
Alany01
 
Paginaweb
PaginawebPaginaweb
Paginaweb
 
Guia 1 de html creacion de documentos html
Guia 1 de html   creacion de documentos htmlGuia 1 de html   creacion de documentos html
Guia 1 de html creacion de documentos html
 
Pagina web
Pagina webPagina web
Pagina web
 
Guía Practica conexión BD 2021
Guía Practica conexión BD  2021Guía Practica conexión BD  2021
Guía Practica conexión BD 2021
 
Ismael sanc
Ismael sancIsmael sanc
Ismael sanc
 
Php curso02
Php   curso02Php   curso02
Php curso02
 
El origen-de-las-paginas-web-final
El origen-de-las-paginas-web-finalEl origen-de-las-paginas-web-final
El origen-de-las-paginas-web-final
 
Desarrolla aplicaciones-web
Desarrolla aplicaciones-webDesarrolla aplicaciones-web
Desarrolla aplicaciones-web
 
Presentación Final
Presentación FinalPresentación Final
Presentación Final
 
440 material impreso uc059-3 desarrollo de pagina web y recursos multimedia (1)
440 material impreso uc059-3 desarrollo de pagina web y recursos multimedia (1)440 material impreso uc059-3 desarrollo de pagina web y recursos multimedia (1)
440 material impreso uc059-3 desarrollo de pagina web y recursos multimedia (1)
 
Curso_de_Dreamweaver.pdf
Curso_de_Dreamweaver.pdfCurso_de_Dreamweaver.pdf
Curso_de_Dreamweaver.pdf
 

Último

Trabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnologíaTrabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnologíassuserf18419
 
International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)GDGSucre
 
Proyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptxProyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptx241521559
 
La era de la educación digital y sus desafios
La era de la educación digital y sus desafiosLa era de la educación digital y sus desafios
La era de la educación digital y sus desafiosFundación YOD YOD
 
Plan de aula informatica segundo periodo.docx
Plan de aula informatica segundo periodo.docxPlan de aula informatica segundo periodo.docx
Plan de aula informatica segundo periodo.docxpabonheidy28
 
guía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Josephguía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan JosephBRAYANJOSEPHPEREZGOM
 
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIA
CLASE  DE TECNOLOGIA E INFORMATICA PRIMARIACLASE  DE TECNOLOGIA E INFORMATICA PRIMARIA
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIAWilbisVega
 
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft FabricGlobal Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft FabricKeyla Dolores Méndez
 
Cortes-24-de-abril-Tungurahua-3 año 2024
Cortes-24-de-abril-Tungurahua-3 año 2024Cortes-24-de-abril-Tungurahua-3 año 2024
Cortes-24-de-abril-Tungurahua-3 año 2024GiovanniJavierHidalg
 
EPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveEPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveFagnerLisboa3
 
9egb-lengua y Literatura.pdf_texto del estudiante
9egb-lengua y Literatura.pdf_texto del estudiante9egb-lengua y Literatura.pdf_texto del estudiante
9egb-lengua y Literatura.pdf_texto del estudianteAndreaHuertas24
 
KELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento ProtégelesKELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento ProtégelesFundación YOD YOD
 
Redes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdfRedes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdfsoporteupcology
 
Hernandez_Hernandez_Practica web de la sesion 12.pptx
Hernandez_Hernandez_Practica web de la sesion 12.pptxHernandez_Hernandez_Practica web de la sesion 12.pptx
Hernandez_Hernandez_Practica web de la sesion 12.pptxJOSEMANUELHERNANDEZH11
 
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...silviayucra2
 
trabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdftrabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdfIsabellaMontaomurill
 

Último (16)

Trabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnologíaTrabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnología
 
International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)
 
Proyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptxProyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptx
 
La era de la educación digital y sus desafios
La era de la educación digital y sus desafiosLa era de la educación digital y sus desafios
La era de la educación digital y sus desafios
 
Plan de aula informatica segundo periodo.docx
Plan de aula informatica segundo periodo.docxPlan de aula informatica segundo periodo.docx
Plan de aula informatica segundo periodo.docx
 
guía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Josephguía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Joseph
 
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIA
CLASE  DE TECNOLOGIA E INFORMATICA PRIMARIACLASE  DE TECNOLOGIA E INFORMATICA PRIMARIA
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIA
 
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft FabricGlobal Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
 
Cortes-24-de-abril-Tungurahua-3 año 2024
Cortes-24-de-abril-Tungurahua-3 año 2024Cortes-24-de-abril-Tungurahua-3 año 2024
Cortes-24-de-abril-Tungurahua-3 año 2024
 
EPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveEPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial Uninove
 
9egb-lengua y Literatura.pdf_texto del estudiante
9egb-lengua y Literatura.pdf_texto del estudiante9egb-lengua y Literatura.pdf_texto del estudiante
9egb-lengua y Literatura.pdf_texto del estudiante
 
KELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento ProtégelesKELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento Protégeles
 
Redes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdfRedes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdf
 
Hernandez_Hernandez_Practica web de la sesion 12.pptx
Hernandez_Hernandez_Practica web de la sesion 12.pptxHernandez_Hernandez_Practica web de la sesion 12.pptx
Hernandez_Hernandez_Practica web de la sesion 12.pptx
 
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
 
trabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdftrabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdf
 

Ls1 pd2-210919171605

  • 1. UNIVERSIDAD ISRAEL CIENCIAS DE LA INGENIERÍA CARRERA DE SISTEMAS DE INFORMACIÓN PLATAFORMAS DE DESARROLLO 2 SEMESTRE 2021 B LABORATORIO S1 TEMA: HTML PROFESOR: Mg. Luis Fernando Aguas Bucheli QUITO, 2021
  • 2. Ciencias de la Ingeniería Universidad Israel Ciencias de la Ingeniería Carrera de Sistemas de Información 1. TEMA: HTML 2. OBJETIVOS: • Adquirir los conceptos básicos relacionados con HTML • Reconocer las características de HTML 3. OBJETIVOS DE DESARROLLO SOSTENIBLE: Indicador 4.7: De aquí a 2030, asegurar que todos los alumnos adquieran los conocimientos teóricos y prácticos necesarios para promover el desarrollo sostenible, entre otras cosas mediante la educación para el desarrollo sostenible y los estilos de vida sostenibles, los derechos humanos, la igualdad de género, la promoción de una cultura de paz y no violencia, la ciudadanía mundial y la valoración de la diversidad cultural y la contribución de la cultura al desarrollo sostenible 4. INTRODUCCION: HTML (Lenguaje de marcado de hipertexto) es el más básico componente de la Web. Define el significado y la estructura del contenido web. Además de HTML, se utilizan otras tecnologías generalmente para describir la apariencia/presentación de una página web (CSS) o la funcionalidad/comportamiento (JavaScript. "Hipertexto" se refiere a enlaces que conectan páginas web entre sí, ya sea dentro de un único sitio web o entre sitios web. Los enlaces son un aspecto fundamental de la Web. Al cargar contenido en Internet y vincularlo a páginas creadas por otras personas, te conviertes en un participante activo en la «World Wide Web». 5. DESARROLLO: En cualquier editor de texto, en este caso Notepad ++, haremos los siguiente: • Confeccionar una página que muestre los nombres de 5 lenguajes de programación separados por un guión. <html> <head>
  • 3. Ciencias de la Ingeniería Universidad Israel Ciencias de la Ingeniería Carrera de Sistemas de Información </head> <body> PHP - Java - JavaScript - C - C++ </body> </html> • Abrimos el editor: • Guardamos
  • 4. Ciencias de la Ingeniería Universidad Israel Ciencias de la Ingeniería Carrera de Sistemas de Información • Teniendo lo siguiente: • Teniendo en el navegador:
  • 5. Ciencias de la Ingeniería Universidad Israel Ciencias de la Ingeniería Carrera de Sistemas de Información • Confeccionar una página que contenga un título de primer nivel <h1> y luego dos títulos de nivel <h2>. Definir un párrafo para cada título de segundo nivel. <html> <head> </head> <body> <h1>Tipos de datos en MySQL</h1> <h2>varchar</h2> <p> se usa para almacenar cadenas de caracteres. Una cadena es una secuencia de caracteres. Se coloca entre comillas (simples): 'Hola'.<br> El tipo "varchar" define una cadena de longitud variable en la cual determinamos el máximo de caracteres. Puede guardar hasta 255 caracteres. Para almacenar cadenas de hasta 30 caracteres, definimos un campo de tipo varchar(30). </p> <h2>int</h2> <p> Se usa para guardar valores numéricos enteros, de -2000000000 a 2000000000 aproximadamente. <br> Definimos campos de este tipo cuando queremos representar, por ejemplo, cantidades. </p> </body> </html> • Abrimos el editor:
  • 6. Ciencias de la Ingeniería Universidad Israel Ciencias de la Ingeniería Carrera de Sistemas de Información • Guardamos • Teniendo lo siguiente:
  • 7. Ciencias de la Ingeniería Universidad Israel Ciencias de la Ingeniería Carrera de Sistemas de Información • Teniendo en el navegador: • Confeccionar una página que contenga cuatro anclas, luego definir cuatro hipervínculos que se enlacen con dichas anclas. <html> <head> </head> <body> <h1>Tutorial de MySQL</h1> <a href="#introduccion">Introducción</a><br> <a href="#mostrarbasedatos">show databases</a><br> <a href="#creaciontabla">Creación de una tabla y mostrar sus campos</a><br> <a href="#cargarregistros">Carga de registros a una tabla y su recuperación</a><br>
  • 8. Ciencias de la Ingeniería Universidad Israel Ciencias de la Ingeniería Carrera de Sistemas de Información <a name="introduccion"></a> <h2>Introducción</h2> <p> SQL, Structure Query Language (Lenguaje de Consulta Estructurado) es un lenguaje de programacion para trabajar con base de datos relacionales como MySQL, Oracle, etc.<br> MySQL es un interpretador de SQL, es un servidor de base de datos.<br></p> <a name="mostrarbasedatos"></a> <h2>show databases</h2> <p> Una base de datos es un conjunto de tablas.<br></p> <a name="creaciontabla"></a> <h2>Creación de una tabla y mostrar sus campos</h2> <p> Una base de datos almacena sus datos en tablas.<br></p> <a name="cargarregistros"></a> <h2>Carga de registros a una tabla y su recuperación</h2> <p> Usamos "insert into". Especificamos los nombres de los campos entre paréntesis y separados por comas y luego los valores para cada campo, también entre paréntesis y separados por comas.<br> </p> </body> </html> • Abrimos el editor:
  • 9. Ciencias de la Ingeniería Universidad Israel Ciencias de la Ingeniería Carrera de Sistemas de Información • Guardamos • Teniendo lo siguiente: • Teniendo en el navegador:
  • 10. Ciencias de la Ingeniería Universidad Israel Ciencias de la Ingeniería Carrera de Sistemas de Información • Implementar una página que enumere una serie de países en una lista ordenada y luego en cada país disponer una lista de hipervínculos de periódicos de dicho país. <html> <head> </head> <body> <ol> <li>Argentina <ul> <li><a href="http://www.lanacion.com.ar">La Nación</a></li> <li><a href="http://www.clarin.com.ar">Clarín</a></li> <li><a href="http://www.pagina12.com.ar">Página 12</a></li> </ul> </li> <li>España <ul> <li><a href="http://www.elpais.es">El País Digital</a></li> <li><a href="http://www.abc.es">ABC</a></li> <li><a href="http://www.elmundo.es">El Mundo</a></li> </ul> </li> <li>México <ul> <li><a href="http://www.jornada.unam.mx">La Jornada</a></li> <li><a href="http://www.el-universal.com.mx">El Universal</a></li> </ul> </li> </ol> </body>
  • 11. Ciencias de la Ingeniería Universidad Israel Ciencias de la Ingeniería Carrera de Sistemas de Información </html> • Abrimos el editor: • Guardamos
  • 12. Ciencias de la Ingeniería Universidad Israel Ciencias de la Ingeniería Carrera de Sistemas de Información • Teniendo lo siguiente: • Teniendo en el navegador:
  • 13. Ciencias de la Ingeniería Universidad Israel Ciencias de la Ingeniería Carrera de Sistemas de Información • Formularios: Form1.html <form action="ejemplo.php" method="get"> <p>Nombre: <input type="text" name="nombre" size="40"></p> <p>Año de nacimiento: <input type="number" name="nacido" min="1900"></p> <p>Sexo: <input type="radio" name="hm" value="h"> Hombre <input type="radio" name="hm" value="m"> Mujer </p> <p> <input type="submit" value="Enviar"> <input type="reset" value="Borrar"> </p> </form>
  • 14. Ciencias de la Ingeniería Universidad Israel Ciencias de la Ingeniería Carrera de Sistemas de Información Form2. Html <p>Sexo: <input type="radio" name="hm" value="h" required> Hombre <input type="radio" name="hm" value="m"> Mujer </p> <p>Edad: <input type="radio" name="edad" value="menor"> Menor <input type="radio" name="edad" value="adulto" required> Adulto </p>
  • 15. Ciencias de la Ingeniería Universidad Israel Ciencias de la Ingeniería Carrera de Sistemas de Información Form3.html <fieldset> <legend>Datos personales</legend> <p>Nombre: <input type="text" name="nombre" size="30"></p> <p>Edad: <input type="number" name="edad"></p> </fieldset> <fieldset> <legend>Cultura general</legend> <p>Capital de Noruega: <input type="radio" name="p1" value="1"> Copenhague <input type="radio" name="p1" value="2"> Helsinki <input type="radio" name="p1" value="3"> Oslo
  • 16. Ciencias de la Ingeniería Universidad Israel Ciencias de la Ingeniería Carrera de Sistemas de Información </p> <p>Fecha de la Revolución francesa: <input type="radio" name="p2" value="1"> 1492 <input type="radio" name="p2" value="2"> 1789 <input type="radio" name="p2" value="3"> 1917 </p> </fieldset>
  • 17. Ciencias de la Ingeniería Universidad Israel Ciencias de la Ingeniería Carrera de Sistemas de Información 6. BIBLIOGRAFIA: