Actividad HTML

 

1. Historia del html

2. Estructura de una página en html

3. Que es una etiqueta y cual es su sintáxis para su manejo en html?

4. Etiquetas básicas que maneja html con ejemplos

5.  Manejo de tablas en Html, Realizar un ejemplo

5. Manejo de formularios en HTML, realizar un ejemplo

 

Leer más: https://desarrollowebduvansilva.webnode.es/desarrollo-web/actividad-html/

Crea tu propia web gratis: https://www.webnode.es

 

 

DESARROLLO

 

Historia del html

El HTML fue desarrollado originalmente por Tim Bernes-Lee en el CERN, y fue popularizado por el navegador Mosaic desarrollado por la NCSA. Debido a gran crecimiento de la Web ha creado la necesidad de que tanto autores como navegadores usen la misma versión de HTML, esto ha motivado la creación de las distintas especificaciones de HTML desde la versión 2.0 (Noviembre de 1995) hasta la actual versión 4.0 (Diciembre de 1997).

Los documentos que usen HTML deben funcionar bien en distintas plataformas y navegadores. Asegurando la interoperabilidad entre ambos se asegura un menor coste para los proveedores de contenido en la Web pues sólo tienen que preocuparse de publicar una versión de los documentos. Si no se estandarizase el HTML se correría el riesgo de que la Web se convierta en un mundo lleno de estándares propietarios, llenos de formatos incompatibles entre sí, reduciendo el potencial comercial para todos los participantes. Cada versión del HTML ha intentado reflejar el mayor consenso posible entre los miembros de la industria de forma que la inversión de los proveedores de contenido no se convierta en inservible por no poderse leer los documentos en un corto periodo de tiempo.
 Extraido de: https://www.dte.us.es/seminari/curso-html/introduccion_al_html.htm

 

Estructura de una página en html

Toda página Web tiene una estructura que permite al programador saber de antemano qué tipo de información necesita introducir. Esto ayuda a que la página que diseña sea claramente legible y se pueda modificar más fácilmente. Si una página Web es complicada en su diseño, habrá muy pocos que sepan dar el mantenimiento adecuado. Abajo se muestra la estructura lógica de una página Web.

 

Extraido de:https://www.google.com.co/search?q=Estructura+de+una+p%C3%A1gina+en+html&espv=210&es_sm=93&source=lnms&tbm=isch&sa=X&ei=PoX9UurbC4G3kQf15ICoBg&ved=0CAkQ_AUoAQ&biw=1366&bih=643#facrc=_&imgdii=_&imgrc=MrYiVvao8scVjM%253A%3BiTbcuGSiV1hndM%3Bhttp%253A%252F%252Fcoolcourses.moodle.org%252Fpluginfile.php%252F2931%252Fmod_page%252Fcontent%252F1%252Farchivoso%252Fimagenes_web%252FEstructura_HTML_OMIratia.JPG%3Bhttp%253A%252F%252Fcoolcourses.moodle.org%252Fmod%252Fpage%252Fview.php%253Fid%253D2384%3B793%3B557

 

Que es una etiqueta y cual es su sintáxis para su manejo en html

El HTML es un lenguaje que basa su sintaxis en un elemento de base al que llamamos etiqueta. La etiqueta presenta frecuentemente dos partes: Una apertura de forma general Un cierre de tipo Todo lo incluido en el interior de esa etiqueta sufrirá las modificaciones que caracterizan a esta etiqueta. 

Extraido de:https://profesores.fi-b.unam.mx/cintia/Manualhtml.pdf

 

Etiquetas básicas que maneja html con ejemplos

Headings

Nos definen el tamaño de un título o cabecera.
 

nos dá el tipo de letra más grande.

nos dá el tipo de letra más pequeño.
HTML agrega automaticamente un espacio antes y después de cada título.
 

al ser usado como título de una página Web, es de suma importancia ya que es uno de los parámetros que Google y demás buscadores tiene en cuenta, a la hora de indexar un sitio web.

 
 
 
 

Extraido de:https://www.virtualnauta.com/html-etiquetas-basicas

 

Manejo de tablas en Html, Realizar un ejemplo

Las tablas son una poderosa herramienta a la hora de mostrar y relacionar cierto tipo de información. Aun cuando muchos sitios son construidos (por su naturaleza) sin usar una simple tabla, existen algunas ocasiones en que el valor de las tablas se vuelve esencial.
En las próximas líneas intentaremos cubrir todas las características de las tablas para estar listos para utilizarlas cuando se necesite.

Simple tables

 Una tabla HTML puede ser considerada, de manera simple, como un grupo de filas donde cada una de ellas contiene un grupo de celdas (y no alrevés). Las tablas, como toda estructura en los documentos HTML, son definidas usando elementos. Entonces, una tabla simple puede ser insertada en un documento HTML usando tres elementos: el elemento HTML table (estructura contenedora principal), el elemento HTML tr (contenedor de fila) y el elemento HTML td (celda).

 

Unificación de celdas

Para algunas tablas puedes necesitar unificar dos o más celdas en una sola que pasará a ocupar el lugar de aquellas afectadas. Estas unificaciones pueden ser llevadas a cabo con los atributos "rowspan" (para unificación vertical) y "colspan" (para unificación horizontal), ambos disponibles para celdas (tag HTML td y tag HTML th).

extraido de: https://www.htmlquick.com/es/tutorials/tables.html

 

Manejo de formularios en HTML, realizar un ejemplo

Qué son los formularios?

Los formularios son posiblemente la herramienta más utilizada en Internet para obtener datos e información acerca de la gente que navega nuestro sitio. La idea de los formularios es recolectar información online en la interacción con el usuario y luego ejecutar una determinada acción con la misma, que podría ser por ejemplo, quizás el caso más utilizado, un formulario de venta que el usuario completa y luego es enviado vía email al vendedor en forma encriptada.

¿Cómo los definimos?

Cinco son solamente las etiquetas que el código HTML posee para definir todos los elementos interactivos que un formulario puede presentar: <FORM>, <INPUT>, <SELECT>, <OPTION> y <TEXTAREA>. Estas etiquetas, junto a un número de modificadores o atributos, son suficientes para indicarle al navegador cliente cómo debe recolectar la información, cómo debe manejarla una vez recolectada y cómo debe interactuar con el servidor.

Etiqueta <FORM>

Todo formulario debe estar encerrado entre el par de etiquetas <FORM> y </FORM>, y debe ser ubicado en el cuerpo de cualquier documento HTML, es decir, entre el par de etiquetas <BODY> y </BODY>. Esta etiqueta <FORM> presenta tres atributos posibles:

Comando

Descripción

ACTION

el valor de este parámetro es la URL del programa o guión en el Servidor Web utilizado para procesar la información recolectada.

METHOD

puede asumir el valor GET o el valor POST, y definen la manera en la cual los datos son transferidos al servidor.

ENCTYPE

este atributo está reservado para que la información viaje en forma encriptada a través de Internet

 

ejemplo formularios:

codigo

<HTML>
< HEAD>
< TITLE>FORMULARIOS</TITLE>
< /HEAD>
< BODY>
< FORM ACTION=”mailto:quantum@mundo21.com ” METHOD=POST>
< table align=”center” border=”0″>
< td align=”left” width=”100″>Nombre:
< /td>
< td align=”center” width=”150″><INPUT NAME=”nombre” MAXLENGTH=”25″ TYPE=”TEXT” VALUE=”">
< /td>
< tr>
< td align=”left” width=”100″>Email:
< /td>
< td align=”center” width=”150″><INPUT NAME=”mail” MAXLENGTH=”25″ TYPE=”TEXT” VALUE=”">
< /td>
< tr>
< td align=”left” width=”100″>Motivo:
< /td>
< td align=”center” width=”150″><INPUT NAME=”motivo” MAXLENGTH=”25″ TYPE=”TEXT” VALUE=”">
< /td>
< tr>
< td align=”left” width=”100″> Mensaje:
< /td>
< td><TEXTAREA NAME=”mensaje” ROWS=3 COLS=20>
< /TEXTAREA>
< /td>
< tr>
< td widht=”100″>
< /td>
< td align=”right” width=”150″><INPUT NAME=”boton” TYPE=”SUBMIT” VALUE=”Enviar”>
< /td>
< /TABLE>
< /FORM>
< /BODY>
< /HTML>

Lo que se vería de esta forma:

 

 

Nombre:

Email:

Motivo:

Mensaje:

 

 
Recuerado de: https://www.webexperto.com/articulos/html/todo-sobre-formularios-en-html-117/
 
 
 
 

Actividad 2

1.  Crear una tabla en Html con la  hora, los dias de la semana y las clases que reciben por dia y en la parte superior debe aparecer horario de clase y una imagen que tenga ver con ingeniería o tecnolgía de sistemas.

 

2.  Realizar el siguiente formulario con codigo Html....

 

Nota:  al terminar cada punto tomarle una foto a la imagen y subirla al igual que codigo html guardado como txt... e insertarlo en el sitio Web de cada uno....



 
 
SOLUCION ACTIVIDAD 2
 
 
PRIMER PUNTO
 
 
 
CODIGO
 
<html>
<CENTER>
<head>
<title> Horario de clase </title>
<body>
<CENTER>
<img src="logo.jpg">
 
 
<h2><EM><U><B>Horario de Clases</B></U></EM></h2>
 
 
<TABLE BORDER>
<TR>
    <TH>Materias</TH><TH>Aulas</TH> <TH>Hora</TH> <TH>Dia</TH>
</TR>
 
<TR><TH ROWSPAN=2> Auditoria de Sistemas</TH>
   <TD>  01-054  </TD> <TD> 17:15  -  19:30 </TD> <TD> Sabados </TD>
</TR>
 
<TR>
<TR><TH ROWSPAN=2> Arquitectura de Computadores</TH>
   <TD>  01-063  </TD> <TD> 10:30  -  12:45 </TD> <TD> Sabados </TD>
</TR>
 
<TR>
<TR><TH ROWSPAN=2> Derecho Informatico</TH> 
   <TD> 01-064   </TD> <TD> 12:45  -  14:15 </TD> <TD> Sabados </TD>
</TR>
 
<TR>
<TR><TH ROWSPAN=2> Base de Datos </TH>
   <TD>  01-062  </TD> <TD> 08:15  -  10:30 </TD> <TD> sabados </TD>
</TR>
 
<TR>
<TR><TH ROWSPAN=2> Programacion Web 1</TH> 
   <TD> 01-054   </TD> <TD> 15:00  -  16:30 </TD> <TD> Sabados </TD>
</TR>
 
 
</TABLE>
</CENTER>
 
 
 
 
SEGUNDO PUNTO
 
 
 
CODIGO: