Scribd
Cargar
8 vistas5 páginas

4prac 4 HTML

El documento presenta un código HTML que incluye un menú de navegación, listas ordenadas y desordenadas, una tabla de horario y un formulario de contacto. La tabla detalla las actividades programadas para cada día de la semana, mientras que el formulario permite a los usuarios enviar su información de contacto. También se incluye un código CSS que estiliza el menú y otros elementos de la página.

Cargado por

Cristel Mercedes
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
8 vistas5 páginas

4prac 4 HTML

El documento presenta un código HTML que incluye un menú de navegación, listas ordenadas y desordenadas, una tabla de horario y un formulario de contacto. La tabla detalla las actividades programadas para cada día de la semana, mientras que el formulario permite a los usuarios enviar su información de contacto. También se incluye un código CSS que estiliza el menú y otros elementos de la página.

Cargado por

Cristel Mercedes
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 5

Código HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="ESTILO practica 4.css" type="text/css">
</head>
<body bgcolor="#F7E8A6">
<div class="container">
<h1>MENÚ</h1>
<nav id="menu">
<ul>
<li> <a href="#Lista ordenada"> Lista ordenada</a></li>
<li> <a href="#Lista desordenada"> Lista desordenada</a></li>
<li> <a href="#Tabla(Horario)">Tabla(Horario)</a></li>
<li> <a
href="#Formulario(Contacto)">Formulario(Contacto)</a></li>
</ul>
</nav>
</div>
<ol id="Lista ordenada">
<h1> Lista ordenada</h1>
<li> Alexa Rodríguez</li>
<li> Cristel Mercedes</li>
<li> Daury García</li>
<li> Emely Hernández</li>
<li> Frida Acevedo</li>
<li> Joan Collado</li>
<li> Lía Báez</li>
<li> María Cruz</li>
<li> Marianne Inoa</li>
<li> Miguel Reyes</li>
</ol>

<ul id="Lista desordenada">


<h1> Lista desordenada</h1>
<li>Análisis y Diseño de Sistemas informáticos</li>
<li> Base de Datos</li>
<li> Portales Web</li>
<li> Matemáticas</li>
<li> Lengua Española</li>
<li> Biología</li>
<li> Ciencias Sociales</li>
<li> Ofimática</li>
<li> Educación Artística</li>
<li> Inglés</li>
<li> Educación Física</li>
<li> Formación Humana</li>
</ul>
<table id="Tabla(Horario)" style="width: 90%;" border="4"
cellpadding="6" cellspacing="6" bgcolor="#5C8EDF">
<center><h1>Tabla(Horario)</h1></center>
<tr>
<td> &nbsp; &nbsp;</td>
<td>&nbsp; &nbsp;&nbsp; &nbsp;Lunes</td>
<td>&nbsp; &nbsp;&nbsp; &nbsp;Martes</td>
<td>&nbsp; &nbsp;&nbsp; &nbsp;Miércoles</td>
<td>&nbsp; &nbsp;&nbsp; &nbsp;Jueves</td>
<td>&nbsp; &nbsp;&nbsp; &nbsp;Viernes</td>
</tr>
<tr>
<td bgcolor="red"> 7:40/7:50<div class="linea"></div></td>

<th align="center" bgcolor="red" colspan="5">&nbsp; &nbsp;&nbsp;


&nbsp;ACTO CÍVICO-RELIGIOSO</th>

</tr>
<tr>
<td bgcolor="#CB7F6E "> 7:50/8:40 <div class="linea"></div></td>
<td bgcolor="#CB7F6E "> &nbsp; &nbsp;&nbsp; &nbsp;Inglés</td>
<td bgcolor="#CB7F6E "> &nbsp; &nbsp;&nbsp; &nbsp;Matemáticas</td>
<td bgcolor="#CB7F6E ">&nbsp; &nbsp;&nbsp; &nbsp;Arte</td>
<td bgcolor="#CB7F6E ">&nbsp; &nbsp;&nbsp; &nbsp;Base de Datos</td>
<td bgcolor="#CB7F6E "> &nbsp; &nbsp;&nbsp; &nbsp;Ciencias
Sociales</td>
</tr>
<tr>
<td bgcolor="#B86452 "> 8:40/9:30<div class="linea"></div></td>
<td bgcolor="#B86452 "> &nbsp; &nbsp;&nbsp; &nbsp;Análisis y Diseño de
Sistemas informáticos</td>
<td bgcolor="#B86452 "> &nbsp; &nbsp;&nbsp; &nbsp;Análisis y Diseño de
Sistemas informáticos</td>
<td bgcolor="#B86452 ">&nbsp; &nbsp;&nbsp; &nbsp;Portales Web</td>
<td bgcolor="#B86452 ">&nbsp; &nbsp;&nbsp; &nbsp;Ciencias de la
Naturaleza</td>
<td bgcolor="#B86452 "> &nbsp; &nbsp;&nbsp; &nbsp;Análisis y Diseño de
Sistemas informáticos</td>
</tr>
<tr>
<td bgcolor="#923C29 "> 9:30/10:20<div class="linea"></div></td>
<td bgcolor="#923C29 "> &nbsp; &nbsp;&nbsp; &nbsp;Análisis y Diseño de
Sistemas informáticos</td>
<td bgcolor="#923C29 "> &nbsp; &nbsp;&nbsp; &nbsp;Análisis y Diseño de
Sistemas informáticos</td>
<td bgcolor="#923C29 ">&nbsp; &nbsp;&nbsp; &nbsp;Portales Web</td>
<td bgcolor="#923C29 ">&nbsp; &nbsp;&nbsp; &nbsp;Ciencias de la
Naturaleza</td>
<td bgcolor="#923C29 "> &nbsp; &nbsp;&nbsp; &nbsp;Análisis y Diseño de
Sistemas informáticos</td>
</tr>
<tr>
<td bgcolor="#389540">10:20/10:50<div class="linea"></div></td>

<th align="center" bgcolor="green " colspan="5">&nbsp; &nbsp;&nbsp;


&nbsp;RECREO</th>

</tr>
<tr>
<td bgcolor="#76B473 "> 10:50/11:40<div class="linea"></div></td>
<td bgcolor="#76B473 "> &nbsp; &nbsp;&nbsp; &nbsp;Formación Humana
Integral y Religiosa</td>
<td bgcolor="#76B473 "> &nbsp; &nbsp;&nbsp; &nbsp;Matemáticas</td>
<td bgcolor="#76B473 ">&nbsp; &nbsp;&nbsp; &nbsp;Ofimática</td>
<td bgcolor="#76B473 ">&nbsp; &nbsp;&nbsp; &nbsp;Análisis y Diseño de
Sistemas informáticos</td>
<td bgcolor="#76B473 "> &nbsp; &nbsp;&nbsp; &nbsp;Diseño y Desarrollo
de Base de Datos</td>
</tr>
<tr>
<td bgcolor="##259320 "> 11:40/12:30<div class="linea"></div></td>
<td bgcolor="##259320 "> &nbsp; &nbsp;&nbsp; &nbsp;Formación Humana
Integral y Religiosa</td>
<td bgcolor="##259320 "> &nbsp; &nbsp;&nbsp; &nbsp;Matemáticas</td>
<td bgcolor="##259320 ">&nbsp; &nbsp;&nbsp; &nbsp;Ofimática</td>
<td bgcolor="##259320 ">&nbsp; &nbsp;&nbsp; &nbsp;Análisis y Diseño de
Sistemas informáticos</td>
<td bgcolor="##259320 "> &nbsp; &nbsp;&nbsp; &nbsp;Diseño y
Desarrollo de Base de Datos</td>
</tr>
<tr>
<td bgcolor="#D19C3A "> 12:30/1:30<div class="linea"></div></td>

<th align="center" bgcolor="#D19C3A " colspan="5">&nbsp; &nbsp;&nbsp;


&nbsp;ALMUERZO</th>

</tr>
<tr>
<td bgcolor="#D8D330 "> 1:30/2:20<div class="linea"></div></td>
<td bgcolor="#D8D330 "> &nbsp; &nbsp;&nbsp; &nbsp;Portales Web</td>
<td bgcolor="#D8D330 "> &nbsp; &nbsp;&nbsp; &nbsp;Ofimática</td>
<td bgcolor="#D8D330 ">&nbsp; &nbsp;&nbsp; &nbsp;Inglés</td>
<td bgcolor="#D8D330 ">&nbsp; &nbsp;&nbsp; &nbsp;Lengua Española</td>
<td bgcolor="#D8D330 "> &nbsp; &nbsp;&nbsp; &nbsp;Inglés</td>
</tr>
<tr>
<td bgcolor="#C2BE2B "> 2:20/3:10<div class="linea"></div></td>
<td bgcolor="#C2BE2B "> &nbsp; &nbsp;&nbsp; &nbsp;Portales Web</td>
<td bgcolor="#C2BE2B "> &nbsp; &nbsp;&nbsp; &nbsp;Diseño y Desarrollo
de Base de Datos</td>
<td bgcolor="#C2BE2B ">&nbsp; &nbsp;&nbsp; &nbsp;Inglés</td>
<td bgcolor="#C2BE2B ">&nbsp; &nbsp;&nbsp; &nbsp;Lengua Española</td>
<td bgcolor="#C2BE2B "> &nbsp; &nbsp;&nbsp; &nbsp;Ciencias de la
Naturaleza</td>
</tr>
<tr>
<td bgcolor="#ADA823 "> 3:10/4:00<div class="linea"></div></td>
<td bgcolor="#ADA823 "> &nbsp; &nbsp;&nbsp; &nbsp;Diseño y Desarrollo
de Base de Datos</td>
<td bgcolor="#ADA823 "> &nbsp; &nbsp;&nbsp; &nbsp;Diseño y Desarrollo
de Base de Datos</td>
<td bgcolor="#ADA823 ">&nbsp; &nbsp;&nbsp; &nbsp;Ciencias
Sociales</td>
<td bgcolor="#ADA823 ">&nbsp; &nbsp;&nbsp; &nbsp;Lengua Española</td>
<td bgcolor="#ADA823 "> &nbsp; &nbsp;&nbsp; &nbsp;Educación
Física</td>
</tr>
</table>

<form id="Formulario(Contacto)"></form>
<h1> Formulario(Contacto)</h1>
<form
action="https://formspree.io/f/meqyprle"
method="POST">

<label>
Tu correo:
<input type="email" name="email" placeholder="Escribe tu correo">
<input type="password" placeholder="Escribe tu contraseña"
maxlength="20">
<input type="checkbox" name="género" id="Hombre">Hombre
<input type="checkbox" name="género" id="Mujer">Mujer
</label>
<label>
<select name="" id="">
<option value="Santiago">Santiago</option>
<option value="Santo Domingo">Santo Domingo</option>
<option value="La Vega">La Vega</option>
</select>
Tu mensaje:
<textarea id="mensaje" name="mensaje" placeholder="Escribe tu
mensaje"></textarea>
</label>
<!-- your other form fields go here -->
<button type="submit">Send</button>
</form>

</body>
</html>

Código CSS
.container{
width: 80%;
margin: auto;
}

#menu ul{
display: flex;
padding: 0;
margin: 0;
list-style: none;
}

#menu a{
display: block;
padding: 10px;
background-color: black;
text-decoration: none;
color: burlywood;
}

#menu a:hover{
background-color: gray;
}

#menu ul li ul{
display: none;
}

#menu ul li ul :hover + ul, ul li ul:hover{


display:block;
}

También podría gustarte