viernes, 31 de mayo de 2013

Plantillas CSS en HTML

Estas plantillas sirven para agilizar la creación de una pagina en HTML lo cual nos ayuda para que esto sea mas fácil de realizar generando:
  1. Evitar crear código basura (generar mas lineas de las necesarias).
  2. Ahorra tiempo (disminuye el tiempo de creación).
  3. Son herramientas que se utilizan para establecer el formato.
Ejemplo:

Este es el código de mi imagen principal:




<html>

<head> <title> Pagina Principal </title> 
<link rel="stylesheet" type="text/css" href="formato.css"
</head>
<body >
<p class="parrafo"> Buen Inicio de Semana </p>
<hr class="parrafo">
<h1 class="parrafo1"> Lecciones de CSS</h1>
<br>
<a class="parrafo2" href="http://www.yahoo.com"> link </a>
<br>
<p class="caja"> Majeno de cajas </p>
<br>
<p class="caja"> Otro texto de cajas </p>
</body>
</html>

Este es el código de mi hoja de estilo:

/*Hoja de Estilo 
Autor:Mariana
Fecha: 27-05-2013*/

.parrafo{ color:blue;
font-family:Verdana,Arial,Helvetica,sans-serit;
font-size:48pt;
font-weight: bold;
}

.parrafo1{
font-style:Italic;
background-color:red;
line-height:2em;
text-align:left;
text-decoration:overline;
text-transform:capitalize;
text-indent:1in;
letter-spacing:5px;
word-spacing:3em;
}

.parrafo2{
text-color:purple;
background-color:pink;
letter-spacing:2em;
}

a:hover{
background-color:orange;
color:black;
font-size:1.5em;
}

.caja{
width:200px;
height:300px;
background-color:silver;
margin-bottom:3em;
margin-top:3em;
background-image:url("imagenes/IMG_0029.jpg");
}



¿Que genera el código?


Se crea la hoja de estilo, hay se escriben los estilos que tendrán nuestros diversos formatos como: 

  1. p = (párrafo) lo que hice solo fue editarlo para que al llamarlo este apareciera como mi edición.
  2. body = (cuerpo) lo que hice solo fue editarlo para que al llamarlo este apareciera como estoy declarando en mi hoja de estilo.
¿Como llamar a mi nuevo formato?

En el cuerpo de tu hoja principal o pagina web solo lo mandas a traer de la siguiente manera:

<p class="parrafo"> Buen Inicio de Semana </p>

  1. Abrir la etiqueta que se esta editando y colocar la clase y el nombre de esta despues ciera la etiqueta.
  2. Automáticamente va a la hoja de estilo y la caja, este debe tener el mismo nombre y debe ser para esa etiqueta:
.parrafo2{
text-color:purple;
background-color:pink;
letter-spacing:2em;
}

Nos aparecerá como resultado:


El resultado depende del código.
Publicado por en No hay comentarios:

viernes, 24 de mayo de 2013

Continuación de HTML

Diversas Etiquetas para dar formato a Mi pagina html:

<!Comentario. Ninguno -->

<BIG> Aumenta el tamaño. Ninguno </BIG> 

 <BODY> Cuerpo del documento. BGCOLOR, BACKGROUND, TEXT, LINK, VLINK, ALINK </BODY> 

<CAPTION> Posición de la leyenda en una tabla. ALIGN: TOP/BOTTOM. Internet Explorer: LEFT, RIGHT, CENTER </CAPTION> 

<CENTER> Centrar. Ninguno </CENTER> 
<CODE> Formato en tipo código. Ninguno </CODE>

<DD> Definiciones marcadas, para Lista de Definiciones <DL>.
<DIR> Lista de directorio, con elementos marcados con  </DIR> 

 <DL> Lista de Definiciones, con términos marcados con <DT> y definiciones marcadas con <DD>. Ninguno </DL> 
<DT> Términos marcados, para Lista de Definiciones <DL>
<EMBED> Sonido de Fondo. SRC, WIDTH, HEIGHT, AUTOSTART, LOOP. NO - Netscape 

<FONT> Definición de la fuente. SIZE, COLOR. Internet Explorer: FACE. </FONT> 

<FORM> Para ingreso de datos del usuario en un formulario. ACTION, METHOD </FORM> 

<H1 ...H6> Tamaño de letras del 1 al 6. HTML 3.0: LEFT, CENTER, RIGHT </H1 .../H6> <HEAD> Encabezamiento del documento. BASE, TITLE, ISINDEX, NEXTID, META </HEAD>

<HR> Línea horizontal. NOSHADE, SIZE, WIDTH, ALIGN. Internet Explorer: COLOR NO 

<HTML> Al principio y al fin de todo documento. HEAD, BODY </HTML> 

<I> Itálica (Cursiva). Ninguno </I> 

<IMG> Cargar imágenes. ALIGN, SRC, ALT, ISMAP, WIDTH, HEIGHT, VSPACE, HSPACE NO 

<INPUT> Define un objeto de ingreso en un formulario. TYPE, NAME, VALUE, SIZE, MAXLENGHT, ALIGN, SRC, CHECKED </INPUT> 

<LI> Ítem de lista. Netscape: VALUE, TYPE NO

<LISTING> Listados Ninguno. Obsoleto. </LISTING> <LIT> Literal. Como PRE, pero usa letra proporcional. Ninguno </LIT>

<MARQUEE> Marquesina. ALIGN, BEHAVIOR, BGCOLOR, DIRECTION, HEIGHT, WIDTH, HSPACE, VSPACE, LOOP, SCROLLAMOUNT, SCROLLDELAY. </MARQUEE>

<OL> Lista ordenada, con elementos marcados con <LI>. TYPE, START, VALUE. </OL> <OPTION> Opción de selección dentro de un formulario. VALUE, SELECTED VALUE NO

<P> Retorno de línea, con un espacio. 

<P ALIGN> Alineación de texto. LEFT, CENTER, RIGHT </P> 
<S> Texto tachado. Ninguno </S>

<SELECT> Para selección de opciones dentro de un formulario. NAME, SIZE, MULTIPLE </SELECT>
<STRONG> Formato enfatizado más fuerte que <EM>. Ninguno </STRONG>

<SUB> Subíndice. Ninguno </SUB> 
<SUP> Superíndice. Ninguno </SUP> 
<TEXTAREA> Área para ingreso de texto dentro de un formulario. NAME, ROWS, COLS. </TEXTAREA> 

 <TABLE> Tabla. BORDER, CELLPADDING, CELLSPACING, HEIGTH, WIDTH. Internet Explorer: COLOR </TABLE>

 <TITLE> Título dentro de HEAD. Ninguno </TITLE> 

 <TD> Celdas de una fila en una tabla, dentro de <TR>. ALIGN, VALIGN, NOWRAP, COLSPAN, ROWSPAN, HEIGTH, WIDTH </TD>

<TH> Título de Tabla. ROWSPAN, COLSPAN, ALIGN, VALIGN, NOWRAP, HEIGHT, WIDTH </TH> 
<TR> Fila de una Tabla. ALIGN, VALIGN </TR> 
<UL> Lista no ordenada, con elementos marcados con <LI> . COMPACT, TYPE </UL> 

Publicado por en No hay comentarios:

miércoles, 22 de mayo de 2013

HTML

 Mi pagina Web con HTML

Etiquetas para iniciar una pagina web basica:

<html>
        <head>
             <title> Mi primera paguina WEB </title>
       </head>
       <body>
            Esta es mi pagina web
       </body>
</html>




Vídeo de como sacar una pagina web sencilla.



Ejemplo de un código de html que muestra imágenes, tablas, hipervinculos, etc

<html>

   <head>       <title> Pagina con formato e imagenes </title>  </head>  

  <body background="imagenes/sex.jpg" text="blue" link="pink"  vlink="orange">

   <font face="Comic Sans MS,arial,verdana" color="white"> <font  size=20> Universidad Tecnologica de Huejotzingo </font> </font>     <br/>

<a href="http://www.google.com"> <font size=18> Link a google </font> </a>

   <br/>             HIPERVINCULO A UNA PAGINA WEB<a href="http://www.yahoo.com"> <font size=18> Link a yahoo</font> </a>

                HIPERVINCULO A UNA IMAGEN                         <img src="imagenes\gastito.jpg" border="4" bordercolor="black"> <br/>

   <center>           HIPERVINCULO A UNA IMAGEN                    <img src="imagenes\images (1).jpg" border="4" bordercolor="black" width="30%" heigth="50%" alt="Hola Amigo">   </center>

  <br/>             HIPERVINCULO A UNA PAGINA WEB                                                    
<a href="http://www.yahoo.com"> <img src="imagenes/49axg_conejo-bebe_zrp.jpg" width="20%" heigth="10%" alt="Hola"> </a>

    </body>
</html>

HIPERVINCULO A UNA PAGINA WEB

                           


Código de un ejemplo de una pagina web con vídeo y música:

<html>
<head>


<title> Pagina con formato e imágenes </title>



</head>                 
            <body bgcolor="black" text="white" link="pink" vlink="orange">
            <h1> Insertar vídeo y Audio </h1>
                       Insertar video
 <embed src="video/4 G00d D4y T0 D13 H4rd Camrip Latino Yaske.net.mp4" autostart=false loop="true" width="500" height="400"> <br/>

                        Insertar Audio
<embed src="audio/si tu no existieras - Ricardo Arjona.mp3" autostart="true" loop="true" width="50%" height="50%"> 

                       Insertar Imagen Flash
<embed src="http://peoresnada.com/flash/prettyboy2.php" autostart="true" loop="true" width="42%" height="58%" SCROLLING="no">

              
     </body>
</html>
Vídeo de Como poner música y vídeo de fondo.


 Etiquetas para dar formato a Mi pagina html:

< ! Comentario. Ninguno -->

<BIG> Aumenta el tamaño. Ninguno </BIG> 
<BODY> Cuerpo del documento. BGCOLOR, BACKGROUND, TEXT, LINK, VLINK, ALINK </BODY> 

<CAPTION> Posición de la leyenda en una tabla. ALIGN: TOP/BOTTOM. Internet Explorer: LEFT, RIGHT, CENTER </CAPTION> 

<CENTER> Centrar. Ninguno </CENTER> 
<CODE> Formato en tipo código. Ninguno </CODE>

<DD> Definiciones marcadas, para Lista de Definiciones <DL>.
<DIR> Lista de directorio, con elementos marcados con  </DIR> 

<DL> Lista de Definiciones, con términos marcados con <DT> y definiciones marcadas con <DD>. Ninguno </DL> 
<DT> Términos marcados, para Lista de Definiciones <DL>
<EMBED> Sonido de Fondo. SRC, WIDTH, HEIGHT, AUTOSTART, LOOP. 

<FONT> Definición de la fuente. SIZE, COLOR. Internet Explorer: FACE. </FONT> 

<FORM> Para ingreso de datos del usuario en un formulario. ACTION, METHOD </FORM> 

<H1 ...H6> Tamaño de letras del 1 al 6. HTML 3.0: LEFT, CENTER, RIGHT </H1 .../H6> <HEAD> Encabezamiento del documento. BASE, TITLE, ISINDEX, NEXTID, META </HEAD>

<HR> Línea horizontal. NOSHADE, SIZE, WIDTH, ALIGN. Internet Explorer: COLOR NO 

<HTML> Al principio y al fin de todo documento. HEAD, BODY </HTML> 

<I> Itálica (Cursiva). Ninguno </I> 

<IMG> Cargar imágenes. ALIGN, SRC, ALT, ISMAP, WIDTH, HEIGHT, VSPACE, HSPACE NO 

<INPUT> Define un objeto de ingreso en un formulario. TYPE, NAME, VALUE, SIZE, MAXLENGHT, ALIGN, SRC, CHECKED </INPUT> 

<LI> Ítem de lista. Netscape: VALUE, TYPE NO

<LISTING> Listados Ninguno. Obsoleto. </LISTING> <LIT> Literal. Como PRE, pero usa letra proporcional. Ninguno </LIT>

<MARQUEE> Marquesina. ALIGN, BEHAVIOR, BGCOLOR, DIRECTION, HEIGHT, WIDTH, HSPACE, VSPACE, LOOP, SCROLLAMOUNT, SCROLLDELAY. </MARQUEE>

<OL> Lista ordenada, con elementos marcados con <LI>. TYPE, START, VALUE. </OL> <OPTION> Opción de selección dentro de un formulario. VALUE, SELECTED VALUE NO

<P> Retorno de línea, con un espacio. 


<P ALIGN> Alineación de texto. LEFT, CENTER, RIGHT </P> 
<S> Texto tachado. Ninguno </S>

<SELECT> Para selección de opciones dentro de un formulario. NAME, SIZE, MULTIPLE </SELECT>
<STRONG> Formato enfatizado más fuerte que <EM>. Ninguno </STRONG>


<SUB> Subíndice. Ninguno </SUB> 
<SUP> Superíndice. Ninguno </SUP> 
<TEXTAREA> Área para ingreso de texto dentro de un formulario. NAME, ROWS, COLS. </TEXTAREA> 

<TABLE> Tabla. BORDER, CELLPADDING, CELLSPACING, HEIGTH, WIDTH. Internet Explorer: COLOR </TABLE>

<TITLE> Título dentro de HEAD. Ninguno </TITLE> 

<TD> Celdas de una fila en una tabla, dentro de <TR>. ALIGN, VALIGN, NOWRAP, COLSPAN, ROWSPAN, HEIGTH, WIDTH </TD>

<TH> Título de Tabla. ROWSPAN, COLSPAN, ALIGN, VALIGN, NOWRAP, HEIGHT, WIDTH </TH> 
<TR> Fila de una Tabla. ALIGN, VALIGN </TR> 
<UL> Lista no ordenada, con elementos marcados con <LI> . COMPACT, TYPE </UL>

Publicado por en 1 comentario:
Suscribirse a: Entradas (Atom)