trucos para sitios web con o sin wordpress

Trucos para tu sitio web Parte 2

Trucos para tu sitio web Parte 2

Continuamos con mas código para nuestra pagina fácil de implementar y muy útiles para nuestro WebSite

Si aun no lo visitas  —> Trucos para tu sitio web Parte 1

 Para cambiar al tipo de letra a un parrafo

<FONT FACE=”arial”>Texto de prueba 12345 con tipo ARIAL</FONT>
<FONT FACE=”times new roman”>Texto de prueba 12345 con tipo TIMES NEW ROMAN</FONT>
<FONT FACE=”courier new”>Texto de prueba 12345 con tipo COURIER NEW</FONT>
<FONT FACE=”courier”>Texto de prueba 12345 con tipo COURIER</FONT>
<FONT FACE=”roman”>Texto de prueba 12345 con tipo ROMAN</FONT>
<FONT FACE=”small fonts”>Texto de prueba 12345 con tipo SMALL FONTS</FONT>

Ejemplos

Texto de prueba 12345 con tipo ARIAL
Texto de prueba 12345 con tipo TIMES NEW ROMAN
Texto de prueba 12345 con tipo COURIER NEW
Texto de prueba 12345 con tipo COURIER
Texto de prueba 12345 con tipo ROMAN
Texto de prueba 12345 con tipo SMALL FONTS

Para tener diferentes tipos de letras claro

Para mostrar  pequeños detalles del links a donde se dirigirá nuestro usuario

Codigo

<a href=”https://angellomix.com”
onmouseover=”javascript:alert(‘Mensaje’);return false”>Link</a>

URL del artículo: http://www.ejemplode.com/17-html/532-ejemplo_de_como_poner_imagen_de_fondo_en_html.html
Leer completo: Cómo poner imagen de fondo en HTML

Asi el usuario sabrá a donde va

[su_note note_color=”#668cff”] Para que el usuario pueda imprimir la pagina [/su_note]

<input type=”button” value=”Imprime esta página” onclick=”window.print()”>

Solo dara click eb el boton y lo enviara a imprimir  

Algunos códigos útiles 

 <STRONG>…< /STRONG>
Muestra el texto en negritas, resaltado.

<SUB>…< /SUB>
Muestra el texto encerrado como un subindice.

<SUP>…< /SUP>
Muestra el texto encerrado como superindice.

<TT>…< /TT>
Muestra el texto en formato teletipo.

<U>…< /U>
Muestra el texto subrayado. No use este comando puede confundir con una dirección o Link.

<VAR>…< /VAR>
Especifica una variable. Eltexto se muestra en letras pequeñas y de tamaño fijo.

<WBR>
Hace que el texto que contiene, se trunque si es necesario.

<XMP>…< /XMP>
Hace que el texto encerrado se muestre sin procesar los coamdos HTML que contenga. Obsoleto — Se usa el comando PRE.

[su_note] Así nuestro texto se podrá ver un poco mejor  [/su_note]

Tener ua imagen de fondo en la pagina 

Dentro de la etiqueta body aplicamos lo siguiente

<body background=”fondo.jpg”>

[su_note] Tenemos un fondo   [/su_note]

Para que la imagen de fondo no se duplique al bajar por la pagina 

Dentro de la etiqueta ‘head’

<STYLE TYPE=”text/css”>
body {
background-repeat : no-repeat;
background-position : center;
background-attachment : fixed;
}
</style>

Con este código la imagen estará estática en el centro y solo  la pagina se moverá 

listas en html 

hacer una lista ordenada

<H1>Listas</H1>
Una lista ordenada
<ol>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ol>

sin ordenar

Una lista sin ordenar
<ul>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ul>

   Ordenadas y desordenadas

Imágenes y vínculos en nuestra web

Incluir una imagen desde un archivo
<IMG SRC=”m.jpg”>
<P>
Incluir una imagen des una web
<IMG SRC=”https://angellomix.com/angellomix/images//foto.jpg”>
<P>
Crear un hipervínculo
<A HREF=”https://angellomix.com/”>Angellomix</A>
<P>
Parámetro para que el hipervínculo se abra en una ventana nueva target

<A HREF=”https://angellomix.com/” target =”_blank” >Angellomix</A>

muy necesarios para una pagina   

Todo sobre una tabla en nuestra pagina 

Para crear una tabla <table></table>
detro de la tabla para:

filas= <tr></tr>

celdas= <td></td>
<TABLE BORDER>
<TR> <TD>fila1-celda1</TD> <TD>fila1-celda2</TD> <TD>fila1-celda3</TD> </TR>
<TR> <TD>fila2-celda1</TD> <TD>fila2-celda2</TD> <TD>fila2-celda3</TD> </TR>
</TABLE>
para el alto y ancho de la tabla
<TABLE WIDTH=60%><TABLE HEIGHT=200>

<CAPTION> Ejemplo de filas desiguales </CAPTION>
Normalmente, el contenido de una celda está alineado a la izquierda. Pero se puede
cambiar esto añadiendo dentro de la etiqueta de la celda los siguientes atributos:
<TD ALIGN=CENTER> Al centro </TD>
<TD ALIGN=RIGHT> A la derecha </TD>
<TH ALIGN=LEFT> Cabecera a la izquierda </TH>
(Recuérdese que por defecto están centradas)
El alineamiento por defecto en el sentido vertical es en el medio. También se puede
cambiar, añadiendo dentro de la etiqueta de la celda los siguientes atibutos:
<TD VALIGN=TOP> Arriba </TD>
<TD VALIGN=BOTTOM> Abajo </TD>

para  combinar celdsa o columnas

<TR> <TD COLSPAN=2> Celda sobre 2 columnas </TD> <TR>

<TD ROWSPAN=2> Celda junto a 2 filas </TD>

Código Para lo ancho del cuadro y el borde de la celda en una tabla

<table CELLSPACING=11 CELLPADDING=15>

Asi tendremos una tabla profesional y a nuestro gusto

Código para Tener un vídeo de YouTube y que se visualice automáticamente 

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/watch?v=k0QmFCEJ7qY” frameborder=”0″ allowfullscreen></iframe>

Algo muy util que podemos implementar en esta parte es que  si queremos que el vídeo empieze a reproducirse cuando el usuario entre a la pagina sin necesidad de dar click en play  solo debemos poner esta linea de codigo   ?rel=0&autoplay=1  al final del link del video

usando  el mismo quedaría así

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/watch?v=k0QmFCEJ7qY?rel=0&autoplay=1” frameborder=”0″ allowfullscreen></iframe>

Excelente los vídeos no deben faltar

Preguntas? Comenta estoy para ayudarte.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *