martes, 25 de junio de 2013
jueves, 9 de mayo de 2013
Cambio de apariencia de la página web empleando estilos en los hipervínculos y en las listas de las páginas web.
Reporte
de practica 11
Nombre
del alumno: José Antonio Del Ángel Mateos
Grupo:
604-INFO.
Docente:
Lic. Gisela Gutiérrez Lugo.
Nombre de la practica:
Establecer apariencia del texto y de la letra en las páginas web con código
HTML
Propósito: Definir
propiedades con código HTML, que permitan establecer la apariencia del texto y
de la letra utilizada
En la práctica 11 se tiene que elaborar una página en la
cual se hace el uso de hojas de estilo la página contiene el siguiente código:
<html>
<head>
</head>
<title>
Uso de
</title>
<style type="text/css">
.navbar{
list-style-type: none;
padding:0;
margin:0;
FLOAT="left";
margin-right:20px;
margin-bottom:900px;
}
LI{
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em
solid black;
text-decoration: none;
a:link { color: blue; }
a:visited {color: purple; }
</style>
<BODY>
<ul class="navbar">
<li><a href="paginaprincipal.html">Pagina
principal</a></li>
<li><a href="altas.html">Altas</a></li>
<li><a href="bajas.html">Bajas</a></li>
<li><a href="modificaciones.html">Modificaciones</a></li>
<li><a href="Consultas.html">Consultas</a></li>
</ul>
<p><h1>Uso de herramientas
aplicaciones web</h1></p>
<p>¡En este ejemplo
haremos uso de hojas de estilo en cascada!</p>
<p>¡Daremos formato al
texto y a los enlaces!</p>
<p>Esta Página no cuenta
con imágenes, pero contiene enlaces, aunque no te lleven a ningún sitio…</p>
<p>Debería haber más
cosas aquí, pero es suficiente para lo que necesitamos ejemplificar</p>
<style type="text/css">
body { color: blue }
body { background-color: #F3F781 }
body { font-family: Georgia, “Times
New Roman”, Times, serif }
<style type="text/css">
h1 { Font-family:Helvetica,
Geneva, Arial,SunSans-Regular, sans-serif }
</style>
</style>
</body>
</body>
</body>
</html>
Primero
se abre la etiqueta html para poder empezar a trabajar en ella. Despues se
declara style type=”text/css” que
nos permitirá realizar la hoja de estilo.
list-style-type: none; Nos
indica que vamos a abrir una lista en la pagina; a continuación sus propiedades
con estilo:
FLOAT="left"; nos
permite que el flotador (la lista) es te un determinado lugar en este caso
izquierda.
margin-right:20px;
aquí se asigna el valor en pixeles del margen derecho.
background: white; aquí indica que el fondo de la lista
será blanco
border-right:
1em solid black; indica que el borde derecho de la lista será
negro
Así queda la pagina:
Conclusión:
Se necesita delcara <style-css:”text/css” para poder
iniciar el estilo de la pagina, despues se le asignan las diferentes propiedades
que se requieran declarar para la pagina.
Establecer apariencia del texto y de la letra en las páginas web con código HTML.
Reporte
de practica 10
Nombre
del alumno: José Antonio Del Ángel Mateos
Grupo:
604-INFO.
Docente:
Lic. Gisela Gutiérrez Lugo.
Nombre de la practica:
Establecer apariencia del texto y de la letra en las páginas web con código
HTML.
Propósito: Definir
propiedades con código HTML, que permitan establecer la apariencia del texto y
de la letra utilizada.
En la práctica 10 se tiene que
elaborar una página en la cual se hace el uso de hojas de estilo la página
contiene el siguiente código:
<html>
<head>
</head>
<title>
Uso de
</title>
<body>
<ul>
<li><a href="paginaprincipal.html">Pagina principal</a>
<li><a href="altas.html">Altas</a>
<li><a href="bajas.html">Bajas</a>
<li><a href="modificaciones.html">Modificaciones</a>
<li><a href="Consultas.html">Consultas</a>
</ul>
<p><h1>Uso de herramientas aplicaciones web</h1></p>
<p>¡En este ejemplo haremos uso de hojas de estilo en cascada!</p>
<p>¡Daremos formato al texto y a los enlaces!</p>
<p>Esta Página no cuenta con imágenes, pero contiene enlaces, aunque no te lleven a ningún sitio…</p>
<p>Debería haber más cosas aquí, pero es suficiente para lo que necesitamos ejemplificar</p>
<style type="text/css">
body { color: blue }
body { background-color: #F3F781 }
body { font-family: Georgia,"times new roman, arial}
<style type="text/css">
h1 { Font-family:Helvetica, Geneva, Arial,SunSans-Regular, sans-serif }
</style>
</style>
</body>
</body>
</body>
</html>
Primero se hace una lista, se
define de que tipo va a ser la lista y luego los enlaces que llevará con la
etiqueta “a href”. Después se inserta un titulo con la etiqueta “h1”, por
último se agrega el texto que llevará la página.
Ahora insertaremos los estilos, se
define de qué tipo de estilo utilizaremos que será igual a “text/css”,
aplicaremos estilo a través del selector “body”:
body { color: blue } aqui indica el color de la letra de la pagina.
body { background-color: #F3F781 } en esta etiqueta el color del fondo de la pagina.
body { font-family: Georgia,"times new roman, arial} Aqui se establece el tipo de
letra de la pagina.
<style type="text/css"> Se abre otra etiqueta para aplicar el estilo al encabezado.
h1 { Font-family:Helvetica, Geneva, Arial,SunSans-Regular, sans-serif }.
Conclusión:
Para poder aplicar el estilo
a toda la hoja se utiliza el selector –body-, el cual se manda a llamar al
insertar color al fondo de la pagina, también para el tipo de letra y color del
mismo, al igual que el estilo del encabezado, estas etiquetas si necesitan
cierre.
Creacion de formularios con codigo html
Reporte
de practica 8
CONALEP
“Lic.
Jesús Reyes Heroles”
Nombre
del alumno: José Antonio Del Ángel Mateos
Semestre:
sexto
Grupo:
604
Carrera:
Informática.
Modulo:
Diseño De páginas Web.
Docente:
Lic. Gisela Gutiérrez Lugo.
Práctica: Creación de formularios con código HTML
Proposito de la
practica: Emplea formularios con código HTML, para que los usuarios interactúen
con las aplicaciones web.
La practica 8 trata de realizar un formulario en este
caso el curriculum vitae en la pagina web, para ello se necesita insertar el
siguiente código:
<html>
<head>
</head>
<title>
Curriculum vitae
</title>
<body>
<p><b><big>Introducir Currilucum Vitae</b></big></p><br>
Nombre<br>
<input
type="text"
size="30"><br>
Apellidos<br>
<input
type="tex"
size="60"><br>
Contraseña<br>
<input
type="password"
size="10"><br>
CURP<br>
<input
type="text"
size="10"><br>
<td>Sexo</td><br>
<input
type="radio"sexo
value=Masculino>Hombre<br>
<input
type="radio"sexo
value=Femenino>Mujer<br>
<p><td>Subir fotografia</td>
<input
type="text"
size="40">
<input
type="submit"
value="Examinar..."><br></p>
<p><input type="checkbox">Suscribirme al
boletin de novedades<br></p>
<input type="submit" value="Guardar
cambios">
<input type="submit" value="Borrar los
datos introducidos">
</body>
</html>
La etiqueta BIG se utiliza para hacer más grande el
texto y necesita de cierre. La etiqueta INPUT
se utiliza para escribir texto, para seleccionar, incluso hacer un botón,
para realizar los distintos tipos de seleccionar las opciones se utiliza la
etiqueta TYPE que va seguido de la
etiqueta input, en esta etiqueta se escribe de que tipo de opción va a ser, si
va a ser un cuadro de llenado se escribe “text” con su respectivo tamaño que es
la etiqueta SIZE, para hacer una
selección de múltiples opciones se utiliza del tipo radio con su tamaño, el
tipo de opción “checkbox” se utiliza para seleccionar una solo una. Para poder
enviar algún dato se utiliza el tipo de selección “submit” (el cual es un
botón) con la etiqueta “value” que se utiliza para poner el nombre del botón,
estas etiquetas se utilizan tal y como se muestran en el código.
La pagina se muestra como en la siguiente imagen:
Conclusión:
Existen varios tipos de
selección que se pueden utilizar en la pagina para poder llenar el curriculum,
como los puntos de selección, los cuadros de selección y escribir texto asi
como también enviarlos, alos cuales se les puede dar un tamaño.
Suscribirse a:
Comentarios (Atom)