Comprobar conocimientos
html
Teoría
<html>
<head>
<title>
PAGINA DE PRUEBA
</title>
</head>
<body>
<p>
CORTO MENSAJE DE PRUEBA<i>página web</i>.
<p>
PAGINA BASICA EN HTML
</body>
</html>
CABECERAS
<html>
<head>
<title>curso diseño CABECERAS</title>
</head>
<body>
<H1>CABECERA 1</H1>
<H2>CABECERA 2</H2>
<H3>CABECERA 3</H3>
<H4>CABECERA 4</H4>
<H5>CABECERA 5</H5>
<H6>CABECERA 6</H6>
</body>
</html>
TAMAÑO
<html>
<head>
<title>diseño Web COLORES</title>
</head>
<body>
<P><FONT FACE= "VERDANA" COLOR= "BLUE" SIZE=1> ESTO ESTA EN VERDANA AZUL Y TAMAÑO DE 1 </FONT></P>
<P><FONT FACE= "ARIAL" SIZE=3> ESTO ESTA EN ARIAL </FONT></P>
<P><FONT SIZE=+3> ESTO ESTA TRES VECES MÁS GRANDE QUE LA LÍNEA ANTERIOR </FONT></P>
</body>
</html>
ESTILOS
<html>
<head>
<title>diseño Web aspecto</title>
</head>
<body>
<p> <b>ESTO ESTA EN NEGRITA </B></p>
<P> <I>ESTO ESTA EN CURSIVA </I></p>
<P> <U>ESTO ESTA SUBRAYADO </U></p>
<P> <BIG>ESTO ESTA GRANDE </BIG></p>
<P> <SMALL>ESTO ESTA PEQUEÑO </SMALL></p>
<P>AQUI UTILIZAMOS SUPER <SUP> INDICE </SUP></p>
<P>AQUI UTILIZAMOS SUB <SUB> INDICE </SUB></p>
</body>
</html>
LINEA
<head>
<title>diseño Web COLORES</title>
</head>
<body>
<HR WIDTH=80%>
<HR>
<HR WIDTH=600 SIZE=3 ALIGN=RIGHT COLOR="BLUE">
</body>
</html>
COLORES
<html>
<head>
<title>diseño Web COLORES</title>
</head>
<body BGCOLOR= #8E6B23>
<FONT COLOR= BLACK> ESTO ESTA EN NEGRO</FONT COLOR= BLAK>
<FONT COLOR= "#FFFF00">ESTO ESTA EN AMARILLO</FONT COLOR= "#FFFF00">
<FONT COLOR= "#9F5F9F">ESTO ESTA EN VIOLETA </FONT COLOR= "#9F5F9F">
<FONT COLOR= BRONZE>ESTO ESTA EN BRONCE</FONT COLOR= BRONZE>
<FONT COLOR= CORAL> ESTO ESTA EN CORAL</FONT COLOR= CORAL>
</body BGCOLOR>
</html>
TABLA
<html>
<head>
<title>tablas</title>
</head>
<body>
<table border= 2 cellspacing= 1 cellpalding= 1 width= 70% height= 80% align=center Bgcolor= WHITE bordercolor= green>
<TR>
<TD BGCOLOR= MAGENTA> CELDA 1,1 </TD>
<TD BGCOLOR= YELLOW> CELDA 1,2 </TD>
</TR>
<TR>
<TD ALIGN=CENTER><IMG SRC=IMAGEN.GIF> </TD>
<TD BGCOLOR= BROWN><FONT COLOR= WHITE>
En el lenguaje escrito, el texto informativo es aquel en el que el emisor da a conocer brevemente hechos, circunstancias reales o algún tema particular al receptor. Estos textos son narraciones informativas de hechos actuales de forma objetiva.
</FONT>
</TD>
</TR>
</TABLE>
</body>
</html>
COMBINAR CELDAS EN TABLA
<html>
<head>
<title>Ejemplo del uso de tablas - </title>
</head>
<body>
<table border="2px">
<tr>
<td>Campo 1</td>
<td>Campo 2</td>
<td>Campo 3</td>
</tr>
<tr>
<td colspan="2">Campos 4 y 5</td>
<td>Campo 6</td>
</tr>
<tr>
<td>Campo 7</td>
<td>Campo 8</td>
<td>Campo 9</td>
</tr>
</table>
</body>
</html>
LISTA
<html>
<head>
<title>LISTAS</title>
</head>
<body>
<OL TYPE= I>
<LI> ELEMENTO 1
<LI> ELEMENTO 2
<LI> ELEMENTO 3
</OL>
<P>
<OL TYPE= 1 START=2>
<LI> ELEMENTO 1
<LI> ELEMENTO 2
<LI> ELEMENTO 3
</OL>
<OL TYPE= a>
<LI> ELEMENTO 1
<LI> ELEMENTO 2
<LI> ELEMENTO 3
</OL>
</body>
</html>
COMBINAR CELDAS EN TABLA
<html>
<head>
<title>Ejemplo del uso de tablas - </title>
</head>
<body>
<table border="2px">
<tr>
<td>Campo 1</td>
<td>Campo 2</td>
<td>Campo 3</td>
</tr>
<tr>
<td colspan="2">Campos 4 y 5</td>
<td>Campo 6</td>
</tr>
<tr>
<td>Campo 7</td>
<td>Campo 8</td>
<td>Campo 9</td>
</tr>
</table>
</body>
</html>
LISTA
<html>
<head>
<title>LISTAS</title>
</head>
<body>
<OL TYPE= I>
<LI> ELEMENTO 1
<LI> ELEMENTO 2
<LI> ELEMENTO 3
</OL>
<P>
<OL TYPE= 1 START=2>
<LI> ELEMENTO 1
<LI> ELEMENTO 2
<LI> ELEMENTO 3
</OL>
<OL TYPE= a>
<LI> ELEMENTO 1
<LI> ELEMENTO 2
<LI> ELEMENTO 3
</OL>
</body>
</html>
Insertar imágenes
<html>
<table>
<thead>
<tr>
<th>Texto</th>
<th>Icono</th>
</tr>
</thead>
<tr>
<td>Prueba</td>
<td><img src="imagen1.jpg"/></td>
</tr>
<tr>
<td>Descargar</td>
<td><img src="imagen2.jpg"/></td>
</tr>
<tr>
<td>Nivel</td>
<td><img src="imagen3.jpg"/></td>
</tr>
</table>
<a href="http://www.google.com">Google</a>
</html>
<html>
<table>
<thead>
<tr>
<th>Texto</th>
<th>Icono</th>
</tr>
</thead>
<tr>
<td>Prueba</td>
<td><img src="imagen1.jpg"/></td>
</tr>
<tr>
<td>Descargar</td>
<td><img src="imagen2.jpg"/></td>
</tr>
<tr>
<td>Nivel</td>
<td><img src="imagen3.jpg"/></td>
</tr>
</table>
<a href="http://www.google.com">Google</a>
</html>
CSS
Formatos css
Estilos.css
P {
font-size : 12pt;
font-family : arial,helvetica;
font-weight : normal;
}
H1 {
font-size : 36pt;
font-family : verdana,arial;
text-decoration : underline;
text-align : center;
background-color : Teal;
}
BODY {
background-color : #006600;
font-family : arial;
color : yellow;
}
index.html
<html>
<head>
<meta charset="utf-8">
<link rel="STYLESHEET" type="text/css" href="estilos.css">
<title>Página que lee estilos</title>
</head>
<body>
<h1>Página con estilos</h1>
<p>
Esta página posee una cabecera la etiqueta necesaria para enlazar con la hoja de estilos.
</p>
</body>
</html>
Ejercicio: HTML Y FORMULARIO
Trabajo con formularios:
1) Crear la página (Formulario.Html).
2) El elemento de entrada llamado Nº de cuenta deberá ser un campo de contraseña, que permita escribir 20 caracteres.
3) Guardar los cambios y comprobar el funcionamiento en un navegador.
3) Guardar los cambios y comprobar el funcionamiento en un navegador.
4) El botón Restablecer deberá limpiar los campos del formulario.
5) El DNI, de 4 caracteres.
5) El DNI, de 4 caracteres.
Ejercicio de Registro Usuario
<html>
<title>Registro de interés</title>
<FORM ACTION="" METHOD="POST" name="formulario">
Sus nombres:<BR>
<INPUT NAME="nombre" TYPE="TEXT" SIZE="32" maxlength="20"/><BR>
<BR>
Introduce tu edad: <input type="number" name="edad" ="0" MIN="0" MAX="99" >
<BR>
Idioma:<BR>
<SELECT NAME="Idioma">
<OPTION>Español</OPTION>
<OPTION>Inglés</OPTION>
<OPTION>Francés</OPTION>
<OPTION>Alemán</OPTION>
</SELECT>
<BR>
<BR>
¿Estás registrado?<br>
<label><input type="radio" name="Si" value="1">Si</label><br>
<label><input type="radio" name="Si" value="0">No</label><br><BR>
<INPUT TYPE="Submit" VALUE="Enviar">
<input name="Reset" type="reset" id="Reset" value="Borrar">
</FORM>
</INPUT>
</html>
Ejercicio : HTML
En el entorno de trabajo crear un nuevo proyecto de nombre practico_1.
a) Agregar al proyecto creado 3 páginas HTML, de nombre: Principal.Html, Formulario.Html y Acercade.Html
b) Incorporar la etiqueta título con el título de cada una de las páginas.
c) Escribir el siguiente texto en la página Principal.Html,
“Diseño de aplicaciones Web”
“Los sitios Web dinámicos son aquellos que permiten crear aplicaciones dentro de la propia Web, otorgando una mayor interactividad con el navegante. Aplicaciones dinámicas como encuestas y votaciones, foros de soporte, libros de visita, envío de emails inteligentes, reserva de productos, pedidos on-line, atención al cliente personalizada”.
d) Agregar una imagen representativa al texto, como así también color de fondo.
e) Incorporar los siguientes hipervínculos, vinculado cada uno de ellos a sus respectivas páginas: Principal.Html, Formulario.Html, y Acercade.Html (La página Formulario.Html, debe abrir en otra ventana del navegador)
******************************
******************************
FORMULARIO
<html>
<head>
<title>FORMULARIO DE REGISTRO</title>
</head>
<body>
<p align=left><font size=6>Información Personal</font></p> <FORM ACTION="MAILTO:usuario@gmail.com" METHOD=POST ENCTYPE="text/plain">
<b>Nombre</b><br>
<INPUT TYPE=TEXT NAME=NOMBRE size=50><BR><br>
<b>Sexo:</b><br>
<INPUT TYPE=RADIO NAME=SEXO VALUE=MASCULINO>Masculino<br>
<INPUT TYPE=RADIO NAME=SEXO VALUE=FEMENINO>Femenino<br><br>
<b>Número de integrantes de la familia</b><br>
<INPUT TYPE=TEXT NAME=numero número de integrantes de la familia size=5><BR><br>
<b>Idiomas que conoce:</b><br>
<INPUT TYPE=checkbox NAME=idiomas VALUE=español>Español<br>
<INPUT TYPE=checkbox NAME=idiomas VALUE=ingles>Inglés<br><br>
<b>Otros:</b><br>
<textarea NAME=Otros ROWS=5 COLS=50></TEXTAREA><br><br>
<INPUT TYPE=SUBMIT VALUE="ENVIAR INFORMACION">
<INPUT TYPE=RESET VALUE="COMENZAR"><br><br>
</body>
</html>
</FORM>
</INPUT>
</html>
Ejercicio : HTML
En el entorno de trabajo crear un nuevo proyecto de nombre practico_1.
a) Agregar al proyecto creado 3 páginas HTML, de nombre: Principal.Html, Formulario.Html y Acercade.Html
b) Incorporar la etiqueta título con el título de cada una de las páginas.
c) Escribir el siguiente texto en la página Principal.Html,
“Diseño de aplicaciones Web”
“Los sitios Web dinámicos son aquellos que permiten crear aplicaciones dentro de la propia Web, otorgando una mayor interactividad con el navegante. Aplicaciones dinámicas como encuestas y votaciones, foros de soporte, libros de visita, envío de emails inteligentes, reserva de productos, pedidos on-line, atención al cliente personalizada”.
d) Agregar una imagen representativa al texto, como así también color de fondo.
e) Incorporar los siguientes hipervínculos, vinculado cada uno de ellos a sus respectivas páginas: Principal.Html, Formulario.Html, y Acercade.Html (La página Formulario.Html, debe abrir en otra ventana del navegador)
******************************
FORMULARIO
<html>
<head>
<title>FORMULARIO DE REGISTRO</title>
</head>
<body>
<p align=left><font size=6>Información Personal</font></p> <FORM ACTION="MAILTO:usuario@gmail.com" METHOD=POST ENCTYPE="text/plain">
<b>Nombre</b><br>
<INPUT TYPE=TEXT NAME=NOMBRE size=50><BR><br>
<b>Sexo:</b><br>
<INPUT TYPE=RADIO NAME=SEXO VALUE=MASCULINO>Masculino<br>
<INPUT TYPE=RADIO NAME=SEXO VALUE=FEMENINO>Femenino<br><br>
<b>Número de integrantes de la familia</b><br>
<INPUT TYPE=TEXT NAME=numero número de integrantes de la familia size=5><BR><br>
<b>Idiomas que conoce:</b><br>
<INPUT TYPE=checkbox NAME=idiomas VALUE=español>Español<br>
<INPUT TYPE=checkbox NAME=idiomas VALUE=ingles>Inglés<br><br>
<b>Otros:</b><br>
<textarea NAME=Otros ROWS=5 COLS=50></TEXTAREA><br><br>
<INPUT TYPE=SUBMIT VALUE="ENVIAR INFORMACION">
<INPUT TYPE=RESET VALUE="COMENZAR"><br><br>
</body>
</html>
No hay comentarios.:
Publicar un comentario