SlideShare una empresa de Scribd logo
1 de 9
Descargar para leer sin conexión
GUÍA DE USO DE LABORATORIOS
ESTUDIANTE: Guzmán Gómez Carlos Jossue
SEMESTRE: Tercero
PARALELO: C
CARRERA: Pedagogía de las Ciencias Experimentales Informática
Informe N°4
TEMA:
Cotización de un Auto.
OBJETIVO:
Estructurar la cotización de un auto mediante la extensión HTML para desarrollar un formulario
con etiquetas, tablas y opciones adecuadas a la temática.
RESULTADOS DE APRENDIZAJE
 Correcto uso de las herramientas de Visual Studio Code.
 Realizar montajes de códigos con HTML.
 Obtener trabajos precisos con formularios.
ACTIVIDADES:
-Crear un nuevo archivo en el desarrollador Visual Studio Code.
-Insertar etiquetas, atributos de valor url y elementos con itms para la cotización de un auto.
-Concretar un formulario que permita el ingreso de información por parte del visitante del sitio
web.
DESARROLLO DE CONTENIDOS
1. En primer lugar, abrir el programa Visual Studio Code.
2. En segundo lugar, se creará un nuevo proyecto dando click izquierdo sobre “File” y “New
File”.
3. En tercer lugar, para guardar el archivo creado seleccionamos nuevamente “File” y “Save
As”, para a continuación introducir el correspondiente nombre del trabajo y guardarlo con
formato HTML.
4. Luego se establece el analizador de código estático “<html>” para configurar el cuerpo con
la información general del documento a través de la propiedad (<head> / </head>) en el
que se incluye tanto el elemento “META” con el atributo “charset” indicando la
codificación de caracteres, como los metadatos que definen el titulo (<title> / </title>).
Aquí se insertará también una imagen de presentación nombrando a la propiedad requerida
junto al atributo “src”, en donde se puede usar la configuración de tamaños “height” para
la altura y “width” para el ancho o un (<center> / </center>) para el centrado de la figura.
5. Después dentro del cuerpo (<body> / </body>) del código se insertará el estilo “style” que
tendrá la página web, incluyendo métodos “method”, acciones “action”, títulos (<h1> /
</h1>) y subtítulos (<h4> / </h4>).
6. A continuación, en el diseño de la tabla correspondiente al formulario, se ingresa el texto
con los casilleros requeridos junto a un “input” que contiene los controles interactivos
como lo son el tipo de texto “type” y el nombre de cada variable “name”. Es importante
estructurar los requisitos de datos a rellenar con un “<tr> y </tr>” para cada fila horizontal
incluyendo los diferentes “<td> / </td>” que conforman los datos de cada espacio
determinado. Y así sucesivamente para cada variable.
7. Por consiguiente, se inicia la interacción de opciones, establecidos por 3 puntos
fundamentales:
a. Las secciones que corresponden al tema de cada opción, irán con los “<tr> y
</tr>” para cada fila horizontal incluyendo los diferentes “<td> / </td>” que
conforman los datos de cada espacio determinado.
b. El atributo “VALUE” será utilizado para definir el valor enviado por el checkbox.
c. Los elementos que son usados a consideración de cada diseño, serán formados por
un “OPTION” para representar un item dentro de un “<SELECT>” y el
“TEXTAREA” que permite el ingreso de varias líneas a diferencia del cuadro de
texto “input/text”.
Y así sucesivamente con cada opción que se desee incrustar conformando un
“COLSPAN” (columnas) para fusionar celdas consecutivas de una misma fila.
8. Seguidamente, se cierra tanto el diseño de la tabla (</table>) como la sección del
documento (</form>), incluyendo el cuerpo del código (</body>) y el analizador de código
estático (</html>). Guardar por medio de un “Save” la información ingresada.
9. Ingresar en la carpeta en donde se guardó el archivo con formato HTML y dar doble click
sobre el paquete.
10. Por último, al ingresar a la página web se observará el diseño estructurado basado a un
formulario de cotización de un auto. Arrojando diferentes opciones, requisitos y texto que
serán agregados mediante el botón Enviar.
CÓDIGO
<html>
<head>
<meta charset="UTF-8"><meta>
<title>FORMULARIO</title>
<center><img src="https://thumbs.dreamstime.com/b/gran-collage-de-la-foto-de-los-
coches-cl%C3%A1sicos-en-cuba-74082658.jpg" height="300px" width="300px"></center>
</head>
<body style= "background-color:greenyellow">
<FORM method=post action="cgi-bin/script.pl"></FORM>
<center>
<h1>COTIZACIÓN DE AUTOMOVIL</h1>
</center>
<h4><em>Acerca de la persona</em></h4>
<table BORDER=0>
<tr>
<td>Nombre:</td>
<td>
<INPUT type=text name="nombre">
</td>
</tr>
<tr>
<td>Apellido:</td>
<td>
<INPUT type=text name="apellido">
</td>
</tr>
<tr>
<td>CI:</td>
<td>
<INPUT type=text name="CI">
</td>
</tr>
<td>Ciudad:</td>
<td>
<INPUT type=text name="ciudad">
</td>
</tr>
<tr>
<td>Correo electrónico:</td>
<td>
<INPUT type=text name="ce">
</td>
</tr>
<tr>
<td>Celular:</td>
<td>
<INPUT type=text name="ce">
</td>
</tr>
<TR>
<TD>Forma de contacto</TD>
<TD>
<SELECT name="Forma de contacto">
<OPTION VALUE="Correo electrónico">Correo electrónico</OPTION>
<OPTION VALUE="WhatsApp">WhatsApp</OPTION>
<OPTION VALUE="Llamada">Llamada</OPTION>
</SELECT>
</TD>
</TR>
<TR>
<TD>Observaciones</TD>
<TD>
<TEXTAREA rows="4" name="observaciones">
Escriba aquí sus observaciones</TEXTAREA>
</TD>
</TR>
</table>
<h4><em>Acerca del vehículo</em></h4>
<table BORDER=0>
<TR>
<TD>Marcas:</TD>
<TD>
<SELECT name="BMW">
<OPTION VALUE="BMW">BMW</OPTION>
<OPTION VALUE="Mercedes-Benz">Mercedes-Benz</OPTION>
<OPTION VALUE="Audi">Audi</OPTION>
<OPTION VALUE="Kia">Kia</OPTION>
<OPTION VALUE="Land Rover">Land Rover</OPTION>
<OPTION VALUE="Nissan">Nissan</OPTION>
<OPTION VALUE="Toyota">Toyota</OPTION>
<OPTION VALUE="Otros">Otros</OPTION>
</SELECT>
</TD>
</TR>
<TR>
<TD>Año:</TD>
<TD>
<SELECT name="0 Km">
<OPTION VALUE="0 Km">0 km</OPTION>
<OPTION VALUE="1950">1950</OPTION>
</SELECT>
</TD>
</TR>
<tr>
<td>Modelo:</td>
<td>
<INPUT type=text name="modelo">
</td>
</tr>
<TR>
<TR>
<TD>Características:</TD>
<TD>
Airbag <INPUT type=radio name="Airbag" value="A">
<br>Automático: <INPUT type=radio name="Automático" value
="F">
<br>Llantas: <INPUT type=radio name="Llantas" value="L">
</TD>
</TR>
<TD COLSPAN=2>
<INPUT type="submit" value="Enviar">
</TD>
</TR>
</table>
</form>
</body>
</html>
f.) ________________________ f.) _______________________
Carlos Jossue Guzmán Gómez MSc. Víctor Zapata
ESTUDIANTE DOCENTE
BIBLIOGRAFÍA:
• López, L. (2021, 14 septiembre). style - HTML: Lenguaje de etiquetas de hipertexto | MDN.
MDN Web Docs. https://developer.mozilla.org/es/docs/Web/HTML/Element/style
• Gonzalez, M. (2021). HTML - Code - Tablas básicas. HTML.
https://3con14.biz/html/tablas/20-tablas-b%C3%A1sicas.html
• León, D. (2020). Elemento option. Quick.
https://www.htmlquick.com/es/reference/tags/option.html

Más contenido relacionado

La actualidad más candente (20)

Informe 2
Informe 2Informe 2
Informe 2
 
Informe
InformeInforme
Informe
 
Informe 6
Informe 6Informe 6
Informe 6
 
Inf 1 (instalación de visual studio code)
Inf 1 (instalación de visual studio code) Inf 1 (instalación de visual studio code)
Inf 1 (instalación de visual studio code)
 
Inf 5 (diseños con texto y multimedia)
Inf 5 (diseños con texto y multimedia)Inf 5 (diseños con texto y multimedia)
Inf 5 (diseños con texto y multimedia)
 
Proyecto final
Proyecto finalProyecto final
Proyecto final
 
Informe 4
Informe 4Informe 4
Informe 4
 
Informe 1
Informe 1Informe 1
Informe 1
 
Inf 7 (instalación del xampp)
Inf 7 (instalación del xampp)Inf 7 (instalación del xampp)
Inf 7 (instalación del xampp)
 
Base De Datos Con Visual Basic6.0
Base De Datos Con Visual Basic6.0Base De Datos Con Visual Basic6.0
Base De Datos Con Visual Basic6.0
 
Pasos Para Conectar Una Base De Datos En Visual Basic
Pasos Para Conectar Una Base De Datos En Visual BasicPasos Para Conectar Una Base De Datos En Visual Basic
Pasos Para Conectar Una Base De Datos En Visual Basic
 
Apuntes_6
Apuntes_6Apuntes_6
Apuntes_6
 
Vela
VelaVela
Vela
 
Como crear una base de datos con visual basic
Como crear una base de datos con visual basicComo crear una base de datos con visual basic
Como crear una base de datos con visual basic
 
Visual basic 2010 data por codigo
Visual basic 2010 data por codigoVisual basic 2010 data por codigo
Visual basic 2010 data por codigo
 
Carpeta y blog
Carpeta y blogCarpeta y blog
Carpeta y blog
 
Informe 5
Informe 5Informe 5
Informe 5
 
Creación de Bases de Datos en SQL Server
Creación de Bases de Datos en SQL ServerCreación de Bases de Datos en SQL Server
Creación de Bases de Datos en SQL Server
 
Conexión Base de Datos Access con Visual 2005
Conexión Base de Datos Access con Visual 2005Conexión Base de Datos Access con Visual 2005
Conexión Base de Datos Access con Visual 2005
 
Sop u2 a1_alll
Sop u2 a1_alllSop u2 a1_alll
Sop u2 a1_alll
 

Similar a Inf 4 (cotizacion de autos)

Diseño de sistemas
Diseño de sistemasDiseño de sistemas
Diseño de sistemas
unefa
 
Diseño de sistemas
Diseño de sistemasDiseño de sistemas
Diseño de sistemas
unefa
 
Practico html
Practico htmlPractico html
Practico html
lucascen
 
1. introduccion al desarrollo web php parte 1
1.  introduccion al desarrollo web php parte 11.  introduccion al desarrollo web php parte 1
1. introduccion al desarrollo web php parte 1
Julio Martinez
 
Desarrollo de Aplicaciones Web II - Sesión 03 - Formularios y Validaciones
Desarrollo de Aplicaciones Web II - Sesión 03 - Formularios y ValidacionesDesarrollo de Aplicaciones Web II - Sesión 03 - Formularios y Validaciones
Desarrollo de Aplicaciones Web II - Sesión 03 - Formularios y Validaciones
Didier Granados
 
Ejercicios_basicos_HTML18-19.pdf
Ejercicios_basicos_HTML18-19.pdfEjercicios_basicos_HTML18-19.pdf
Ejercicios_basicos_HTML18-19.pdf
PelaezKevinHugo
 

Similar a Inf 4 (cotizacion de autos) (20)

Clase 1 Plataforma introducción a Diseño Web
Clase 1 Plataforma introducción a Diseño WebClase 1 Plataforma introducción a Diseño Web
Clase 1 Plataforma introducción a Diseño Web
 
Taller Wordpress Nivel II
Taller Wordpress Nivel IITaller Wordpress Nivel II
Taller Wordpress Nivel II
 
Diseño de sistemas
Diseño de sistemasDiseño de sistemas
Diseño de sistemas
 
Diseño de sistemas
Diseño de sistemasDiseño de sistemas
Diseño de sistemas
 
Tutorial formulario
Tutorial formularioTutorial formulario
Tutorial formulario
 
Practico html
Practico htmlPractico html
Practico html
 
Practico html
Practico htmlPractico html
Practico html
 
Formularios y Validaciones
Formularios y ValidacionesFormularios y Validaciones
Formularios y Validaciones
 
1. introduccion al desarrollo web php parte 1
1.  introduccion al desarrollo web php parte 11.  introduccion al desarrollo web php parte 1
1. introduccion al desarrollo web php parte 1
 
Ejercicios_HTML5.pdf
Ejercicios_HTML5.pdfEjercicios_HTML5.pdf
Ejercicios_HTML5.pdf
 
Ejercicios_HTML5.pdf
Ejercicios_HTML5.pdfEjercicios_HTML5.pdf
Ejercicios_HTML5.pdf
 
I9
I9I9
I9
 
Guía Formulario
Guía FormularioGuía Formulario
Guía Formulario
 
Formulario
FormularioFormulario
Formulario
 
Apuntes de HTML
Apuntes de HTMLApuntes de HTML
Apuntes de HTML
 
crear una web
crear una web crear una web
crear una web
 
Manual impresión de etiquetas Avery, modelo 5160
Manual impresión de etiquetas Avery, modelo 5160Manual impresión de etiquetas Avery, modelo 5160
Manual impresión de etiquetas Avery, modelo 5160
 
Desarrollo de Aplicaciones Web II - Sesión 03 - Formularios y Validaciones
Desarrollo de Aplicaciones Web II - Sesión 03 - Formularios y ValidacionesDesarrollo de Aplicaciones Web II - Sesión 03 - Formularios y Validaciones
Desarrollo de Aplicaciones Web II - Sesión 03 - Formularios y Validaciones
 
Ejercicios_basicos_HTML18-19.pdf
Ejercicios_basicos_HTML18-19.pdfEjercicios_basicos_HTML18-19.pdf
Ejercicios_basicos_HTML18-19.pdf
 
Guia4 html
Guia4 htmlGuia4 html
Guia4 html
 

Más de Carlos Guzmán (19)

Proyecto final
Proyecto finalProyecto final
Proyecto final
 
Rúbrica proyecto
Rúbrica proyectoRúbrica proyecto
Rúbrica proyecto
 
Presentacion digital
Presentacion digitalPresentacion digital
Presentacion digital
 
Inf 17 (chatbot)
Inf 17 (chatbot)Inf 17 (chatbot)
Inf 17 (chatbot)
 
Inf 19 (consulya y borrado de datos)
Inf 19 (consulya y borrado de datos)Inf 19 (consulya y borrado de datos)
Inf 19 (consulya y borrado de datos)
 
Inf 16 (grupal 4) (lectura y desarrollo de un número)
Inf 16  (grupal 4) (lectura y desarrollo de un número)Inf 16  (grupal 4) (lectura y desarrollo de un número)
Inf 16 (grupal 4) (lectura y desarrollo de un número)
 
Inf 12 (grupal 3)
Inf 12 (grupal 3)Inf 12 (grupal 3)
Inf 12 (grupal 3)
 
Inf 11 (post)
Inf 11 (post)Inf 11 (post)
Inf 11 (post)
 
Inf 9 (grupal 2)
Inf 9 (grupal 2)Inf 9 (grupal 2)
Inf 9 (grupal 2)
 
Inf 6 (grupal 1)
Inf 6 (grupal 1)Inf 6 (grupal 1)
Inf 6 (grupal 1)
 
Inf 3 (tablas)
Inf 3 (tablas)Inf 3 (tablas)
Inf 3 (tablas)
 
Programación Orientado Objetos
Programación Orientado ObjetosProgramación Orientado Objetos
Programación Orientado Objetos
 
Exposicion de arreglo_bidimencional
Exposicion de arreglo_bidimencionalExposicion de arreglo_bidimencional
Exposicion de arreglo_bidimencional
 
Informe
InformeInforme
Informe
 
Informe sobre exposicion
Informe sobre exposicionInforme sobre exposicion
Informe sobre exposicion
 
Arreglos bidimensionales
Arreglos bidimensionalesArreglos bidimensionales
Arreglos bidimensionales
 
Sander moya
Sander moyaSander moya
Sander moya
 
Informe de la_exposicion_bidimencional
Informe de la_exposicion_bidimencionalInforme de la_exposicion_bidimencional
Informe de la_exposicion_bidimencional
 
Arreglo bidimensional ejercicio
Arreglo bidimensional ejercicioArreglo bidimensional ejercicio
Arreglo bidimensional ejercicio
 

Último

Pasos para enviar una tarea en SIANET - sólo estudiantes.pdf
Pasos para enviar una tarea en SIANET - sólo estudiantes.pdfPasos para enviar una tarea en SIANET - sólo estudiantes.pdf
Pasos para enviar una tarea en SIANET - sólo estudiantes.pdf
NELLYKATTY
 
Profecia 2300 dias explicada, Daniel 8:14
Profecia 2300 dias explicada, Daniel 8:14Profecia 2300 dias explicada, Daniel 8:14
Profecia 2300 dias explicada, Daniel 8:14
KevinBuenrostro4
 
Tema 14. Aplicación de Diagramas 26-05-24.pptx
Tema 14. Aplicación de Diagramas 26-05-24.pptxTema 14. Aplicación de Diagramas 26-05-24.pptx
Tema 14. Aplicación de Diagramas 26-05-24.pptx
Noe Castillo
 
SISTEMA RESPIRATORIO DEL CUERPO HUMANO triptico.docx
SISTEMA RESPIRATORIO DEL CUERPO HUMANO triptico.docxSISTEMA RESPIRATORIO DEL CUERPO HUMANO triptico.docx
SISTEMA RESPIRATORIO DEL CUERPO HUMANO triptico.docx
gesicavillanuevaqf
 

Último (20)

Pasos para enviar una tarea en SIANET - sólo estudiantes.pdf
Pasos para enviar una tarea en SIANET - sólo estudiantes.pdfPasos para enviar una tarea en SIANET - sólo estudiantes.pdf
Pasos para enviar una tarea en SIANET - sólo estudiantes.pdf
 
proyecto semana de los Jardines, actividades a realizar para resaltar esta fecha
proyecto semana de los Jardines, actividades a realizar para resaltar esta fechaproyecto semana de los Jardines, actividades a realizar para resaltar esta fecha
proyecto semana de los Jardines, actividades a realizar para resaltar esta fecha
 
Como construir los vínculos afectivos (Grupal)
Como construir los vínculos afectivos (Grupal)Como construir los vínculos afectivos (Grupal)
Como construir los vínculos afectivos (Grupal)
 
2. Entornos Virtuales de Aprendizaje.pptx
2. Entornos Virtuales de Aprendizaje.pptx2. Entornos Virtuales de Aprendizaje.pptx
2. Entornos Virtuales de Aprendizaje.pptx
 
Resumen Acuerdo 05 04 24.pdf por el que se rigen los Consejos Técnicos Escolares
Resumen Acuerdo 05 04 24.pdf por el que se rigen los Consejos Técnicos EscolaresResumen Acuerdo 05 04 24.pdf por el que se rigen los Consejos Técnicos Escolares
Resumen Acuerdo 05 04 24.pdf por el que se rigen los Consejos Técnicos Escolares
 
ENUNCIADOS CUESTIONARIO S9 GEOLOGIA Y MINERALOGIA - GENERAL.docx
ENUNCIADOS CUESTIONARIO S9 GEOLOGIA Y MINERALOGIA - GENERAL.docxENUNCIADOS CUESTIONARIO S9 GEOLOGIA Y MINERALOGIA - GENERAL.docx
ENUNCIADOS CUESTIONARIO S9 GEOLOGIA Y MINERALOGIA - GENERAL.docx
 
Profecia 2300 dias explicada, Daniel 8:14
Profecia 2300 dias explicada, Daniel 8:14Profecia 2300 dias explicada, Daniel 8:14
Profecia 2300 dias explicada, Daniel 8:14
 
Tema 14. Aplicación de Diagramas 26-05-24.pptx
Tema 14. Aplicación de Diagramas 26-05-24.pptxTema 14. Aplicación de Diagramas 26-05-24.pptx
Tema 14. Aplicación de Diagramas 26-05-24.pptx
 
Tema 8 Estructura y composición de la Tierra 2024
Tema 8 Estructura y composición de la Tierra 2024Tema 8 Estructura y composición de la Tierra 2024
Tema 8 Estructura y composición de la Tierra 2024
 
2.15. Calendario Civico Escolar 2024.docx
2.15. Calendario Civico Escolar 2024.docx2.15. Calendario Civico Escolar 2024.docx
2.15. Calendario Civico Escolar 2024.docx
 
Análisis de la situación actual .La Matriz de Perfil Competitivo (MPC)
Análisis de la situación actual .La Matriz de Perfil Competitivo (MPC)Análisis de la situación actual .La Matriz de Perfil Competitivo (MPC)
Análisis de la situación actual .La Matriz de Perfil Competitivo (MPC)
 
a propósito del estado su relevancia y definiciones
a propósito del estado su relevancia y definicionesa propósito del estado su relevancia y definiciones
a propósito del estado su relevancia y definiciones
 
Tipologías de vínculos afectivos (grupo)
Tipologías de vínculos afectivos (grupo)Tipologías de vínculos afectivos (grupo)
Tipologías de vínculos afectivos (grupo)
 
Vínculo afectivo (labor expositivo de grupo )
Vínculo afectivo (labor expositivo de grupo )Vínculo afectivo (labor expositivo de grupo )
Vínculo afectivo (labor expositivo de grupo )
 
TERCER GRADO PROGRAMACION ANUAL CCSS 3° - 2024.docx
TERCER GRADO PROGRAMACION ANUAL CCSS 3° - 2024.docxTERCER GRADO PROGRAMACION ANUAL CCSS 3° - 2024.docx
TERCER GRADO PROGRAMACION ANUAL CCSS 3° - 2024.docx
 
SISTEMA RESPIRATORIO DEL CUERPO HUMANO triptico.docx
SISTEMA RESPIRATORIO DEL CUERPO HUMANO triptico.docxSISTEMA RESPIRATORIO DEL CUERPO HUMANO triptico.docx
SISTEMA RESPIRATORIO DEL CUERPO HUMANO triptico.docx
 
el poder del estado en el siglo XXI.pptx
el poder del estado en el siglo XXI.pptxel poder del estado en el siglo XXI.pptx
el poder del estado en el siglo XXI.pptx
 
Luz desde el santuario. Escuela Sabática
Luz desde el santuario. Escuela SabáticaLuz desde el santuario. Escuela Sabática
Luz desde el santuario. Escuela Sabática
 
A propósito de la globalización y la financiarización del mundo
A propósito de la globalización y la financiarización del mundoA propósito de la globalización y la financiarización del mundo
A propósito de la globalización y la financiarización del mundo
 
Lección 1: Los complementos del Verbo ...
Lección 1: Los complementos del Verbo ...Lección 1: Los complementos del Verbo ...
Lección 1: Los complementos del Verbo ...
 

Inf 4 (cotizacion de autos)

  • 1. GUÍA DE USO DE LABORATORIOS ESTUDIANTE: Guzmán Gómez Carlos Jossue SEMESTRE: Tercero PARALELO: C CARRERA: Pedagogía de las Ciencias Experimentales Informática Informe N°4 TEMA: Cotización de un Auto. OBJETIVO: Estructurar la cotización de un auto mediante la extensión HTML para desarrollar un formulario con etiquetas, tablas y opciones adecuadas a la temática. RESULTADOS DE APRENDIZAJE  Correcto uso de las herramientas de Visual Studio Code.  Realizar montajes de códigos con HTML.  Obtener trabajos precisos con formularios. ACTIVIDADES: -Crear un nuevo archivo en el desarrollador Visual Studio Code. -Insertar etiquetas, atributos de valor url y elementos con itms para la cotización de un auto. -Concretar un formulario que permita el ingreso de información por parte del visitante del sitio web. DESARROLLO DE CONTENIDOS 1. En primer lugar, abrir el programa Visual Studio Code.
  • 2. 2. En segundo lugar, se creará un nuevo proyecto dando click izquierdo sobre “File” y “New File”. 3. En tercer lugar, para guardar el archivo creado seleccionamos nuevamente “File” y “Save As”, para a continuación introducir el correspondiente nombre del trabajo y guardarlo con formato HTML. 4. Luego se establece el analizador de código estático “<html>” para configurar el cuerpo con la información general del documento a través de la propiedad (<head> / </head>) en el que se incluye tanto el elemento “META” con el atributo “charset” indicando la codificación de caracteres, como los metadatos que definen el titulo (<title> / </title>). Aquí se insertará también una imagen de presentación nombrando a la propiedad requerida junto al atributo “src”, en donde se puede usar la configuración de tamaños “height” para la altura y “width” para el ancho o un (<center> / </center>) para el centrado de la figura.
  • 3. 5. Después dentro del cuerpo (<body> / </body>) del código se insertará el estilo “style” que tendrá la página web, incluyendo métodos “method”, acciones “action”, títulos (<h1> / </h1>) y subtítulos (<h4> / </h4>). 6. A continuación, en el diseño de la tabla correspondiente al formulario, se ingresa el texto con los casilleros requeridos junto a un “input” que contiene los controles interactivos como lo son el tipo de texto “type” y el nombre de cada variable “name”. Es importante estructurar los requisitos de datos a rellenar con un “<tr> y </tr>” para cada fila horizontal incluyendo los diferentes “<td> / </td>” que conforman los datos de cada espacio determinado. Y así sucesivamente para cada variable.
  • 4. 7. Por consiguiente, se inicia la interacción de opciones, establecidos por 3 puntos fundamentales: a. Las secciones que corresponden al tema de cada opción, irán con los “<tr> y </tr>” para cada fila horizontal incluyendo los diferentes “<td> / </td>” que conforman los datos de cada espacio determinado. b. El atributo “VALUE” será utilizado para definir el valor enviado por el checkbox. c. Los elementos que son usados a consideración de cada diseño, serán formados por un “OPTION” para representar un item dentro de un “<SELECT>” y el “TEXTAREA” que permite el ingreso de varias líneas a diferencia del cuadro de texto “input/text”. Y así sucesivamente con cada opción que se desee incrustar conformando un “COLSPAN” (columnas) para fusionar celdas consecutivas de una misma fila.
  • 5. 8. Seguidamente, se cierra tanto el diseño de la tabla (</table>) como la sección del documento (</form>), incluyendo el cuerpo del código (</body>) y el analizador de código estático (</html>). Guardar por medio de un “Save” la información ingresada. 9. Ingresar en la carpeta en donde se guardó el archivo con formato HTML y dar doble click sobre el paquete.
  • 6. 10. Por último, al ingresar a la página web se observará el diseño estructurado basado a un formulario de cotización de un auto. Arrojando diferentes opciones, requisitos y texto que serán agregados mediante el botón Enviar. CÓDIGO <html> <head> <meta charset="UTF-8"><meta> <title>FORMULARIO</title> <center><img src="https://thumbs.dreamstime.com/b/gran-collage-de-la-foto-de-los- coches-cl%C3%A1sicos-en-cuba-74082658.jpg" height="300px" width="300px"></center> </head> <body style= "background-color:greenyellow"> <FORM method=post action="cgi-bin/script.pl"></FORM> <center> <h1>COTIZACIÓN DE AUTOMOVIL</h1> </center> <h4><em>Acerca de la persona</em></h4> <table BORDER=0> <tr> <td>Nombre:</td> <td>
  • 7. <INPUT type=text name="nombre"> </td> </tr> <tr> <td>Apellido:</td> <td> <INPUT type=text name="apellido"> </td> </tr> <tr> <td>CI:</td> <td> <INPUT type=text name="CI"> </td> </tr> <td>Ciudad:</td> <td> <INPUT type=text name="ciudad"> </td> </tr> <tr> <td>Correo electrónico:</td> <td> <INPUT type=text name="ce"> </td> </tr> <tr> <td>Celular:</td> <td> <INPUT type=text name="ce"> </td> </tr> <TR> <TD>Forma de contacto</TD> <TD> <SELECT name="Forma de contacto"> <OPTION VALUE="Correo electrónico">Correo electrónico</OPTION> <OPTION VALUE="WhatsApp">WhatsApp</OPTION> <OPTION VALUE="Llamada">Llamada</OPTION> </SELECT> </TD> </TR> <TR> <TD>Observaciones</TD> <TD> <TEXTAREA rows="4" name="observaciones"> Escriba aquí sus observaciones</TEXTAREA> </TD> </TR> </table>
  • 8. <h4><em>Acerca del vehículo</em></h4> <table BORDER=0> <TR> <TD>Marcas:</TD> <TD> <SELECT name="BMW"> <OPTION VALUE="BMW">BMW</OPTION> <OPTION VALUE="Mercedes-Benz">Mercedes-Benz</OPTION> <OPTION VALUE="Audi">Audi</OPTION> <OPTION VALUE="Kia">Kia</OPTION> <OPTION VALUE="Land Rover">Land Rover</OPTION> <OPTION VALUE="Nissan">Nissan</OPTION> <OPTION VALUE="Toyota">Toyota</OPTION> <OPTION VALUE="Otros">Otros</OPTION> </SELECT> </TD> </TR> <TR> <TD>Año:</TD> <TD> <SELECT name="0 Km"> <OPTION VALUE="0 Km">0 km</OPTION> <OPTION VALUE="1950">1950</OPTION> </SELECT> </TD> </TR> <tr> <td>Modelo:</td> <td> <INPUT type=text name="modelo"> </td> </tr> <TR> <TR> <TD>Características:</TD> <TD> Airbag <INPUT type=radio name="Airbag" value="A"> <br>Automático: <INPUT type=radio name="Automático" value ="F"> <br>Llantas: <INPUT type=radio name="Llantas" value="L"> </TD> </TR> <TD COLSPAN=2> <INPUT type="submit" value="Enviar"> </TD> </TR> </table> </form>
  • 9. </body> </html> f.) ________________________ f.) _______________________ Carlos Jossue Guzmán Gómez MSc. Víctor Zapata ESTUDIANTE DOCENTE BIBLIOGRAFÍA: • López, L. (2021, 14 septiembre). style - HTML: Lenguaje de etiquetas de hipertexto | MDN. MDN Web Docs. https://developer.mozilla.org/es/docs/Web/HTML/Element/style • Gonzalez, M. (2021). HTML - Code - Tablas básicas. HTML. https://3con14.biz/html/tablas/20-tablas-b%C3%A1sicas.html • León, D. (2020). Elemento option. Quick. https://www.htmlquick.com/es/reference/tags/option.html