PACHUPEDIA

Make a Website
HTML
<ul>
Listas
<li>
Elementos de la Lista
<hX>
<p>
<img>
Titulos
Parrafos
Imagenes
<img src="Direccion de la imagen*">
src = source
*puede ser web o direcctorio donde esta
<a>
Links
<a href="Atributos pagina ">TEXTO DEL LINK</a>
<html></html>
<body></body>
<head></head>
Todo lo contenido dentro de estas etiquetas es la pagina

Cuerpo de la pagina, se encuentra dentro de html
Cabecera (puede tener links)
<div class="NombreDeLaClase"></div>
Agrupadores/Secciones
<!DOCTYPE html> Significa que el documento es HML5
-------------------------------------------------CSS
."clase" "elemeto dentro de la clase"{
propiedad: valor; cierro con punto y coma
}
EJ
h1 {
color:red;
}
color = hay 140
valor RGB
Hexa
0-255
0-ff
EJ: rgb(102,153,0);
PROPIEDADES:
font-family
EJ:
font-family: Arial, Helvetica, sans-serif;
font-family: "Times New Roman", Times, serif;
font-family: "Courier New", Courier, monospace
font-size
background-color : "color"
background-image:
border
EJ
bordes de los elementos

border: 3px solid #cc0000 ;
padding:
padding-top
paddig-bottom
padding-left
padding-rigth
borde
margin
margin-left
margin-rigth:
margenes desde fuera del borde

AUTO/XXpx
text-transform: uppercase;
display:
inline/block
BOOTSTRAP
GRID
<div class"row">
class="row"
col-md-4
col-xl-XX
col-sm-XX
TABS
class="nav nav-tabs"
PILLS
class="nav nav-pills"
Jumbotron
class="jumbotron"
HTML: se ejecuta en cascada, va tomando linea por linea y la va ejecutando

<div class="thumbnail">
para poner imagenes thumb
-----------------------------------------------------------------------2DO
<strong>
negrita en html
Indentacin : es el espacio desde el margen a las lineas de codigo

a. font-size: 14px
b. color: orange
c. font-family: Bodoni
backgroundcolor: color;
<em></em>
itallic/cursiva
a cualquier elemento
style=" ESTILOS "
<table></table>
<tr></tr>
<th></th>
<td></td>
tabla
fila
celda con negrira
celda
colspan
ancho de la columna, lo que va a ocupar
PARA CSS
link:
type="text/css"
rel="stylesheet"
href="RUTA"
siempre es asi (esta es necesaria???)

indica que es una hoja de estilo
indica donde se guarda la hoja de estilo
Algunas etiquetas se autocierran como img y link con />

em ->
unidad para medida de letras cuando no usamos pixeles

es una medida relativa
EJ: "font-size: 1em" -> unidad normal
Fuentes incorporadas con CSS

serif
sans-serif
cursive
* si la pc tiene las fuentes instaladas las toma, sino usa la de default
* si le ponemos varias opciones, toma la primera que pueda
* CONSULTA: podemos usar fonts desde otras paginas
texto:
propiedad:
text-decoration
border-radius :
margin: auto
text-align: center
font-weight: bold
opacity
position
display
redondear los bordes

Margenes
Alineacion del texto
Negrita
si se ve o no
* -> selector universal

CSS se identificar para aplicarle los estilos
elemntos
: con el nombre
h1
clases
: con el punto
.
id
: con el numeral
#
pseudo-clase -> son como propiedades de los elementos
para los enlaces:
a:visited
enlace visitado
a:link
enlace si visitar
a:hover
pasar por arriba de un enlace con el mouse
elemento:first-child
elemento:nth-child(4)
selecciono el primer elemento de ese bloque

selecciono
Posicionamiento
Propiedad Display:
block
inline-block
inline
none
convierte un elemnto en una caja bloque

idem, pero permite que otros sean ubicados al lado
que un elem se ubique en la misma linea q otro
elemento desaparece por completo
border-width: 45%;
Margin:
Se puede usar todos por separado o se puede poner todos de una
margin-top
margin-left
.....
o
margin: 1px
top
2px
rigth
3px
4px;
bottom left
Padding: relleno
float: donde va a estar ubicado
------------------------------------------------------------------------------------------JS
$('.clase')
$('#id')
$('elem')
Acceso por clases

Acceso por id
Acceso elemento
.hide();
.show();
.toggle();
.click( function() {});
.animate({ }, tiempo);
.toggleClass('nombreClase')
.keypress
.addClass()
.removeClass()
ocultar elemento
mostrar elemento
cambiar entre oculto y visible elemento
evento click sobre el elemento
$(document).ready(main);
owser
.length
se ejecuta ni bien carga la pagina html en el br
===
!==
igual a
no igual a
Percentage(num1, num2);
agrega clase a un elemento

remueve la clase a un elemento
para saber el largo de un string
alert('mensaje')
Lanza un popUp
EJ:
<body onload="">
Hoisting
jQuery
DOM
.hover()
hace algo cuando pasamos con el mouse por encima
seleccionar anidado dentro de anidado

('div li ol li ul li:nth-child(x)') agregar elementos hasta llegar al nivel de a
nidado que se quiera hacer algo
$('id/class/elem').after('lo que queramos agregar');
$('id/class/elem').before('lo que queramos agregar');
para mover cosas guardarlas en variabres y despues ir moviendo lo q tiene id/cla
ss
$(document).ready( function() {
$('#uno').after('<p>HOLA</p>');
var $p = $('p')
$('#dos').after($p);
});
.empty();
e un elemento.
.remove();
o que tambin.
elimina el contenido y todos los descendientes d

no solo elimina el contenido de un elemento, sin
elimina el elemento en s.
.toggleClass();
agrega o elimina la clase cuando se le hace clic
k.
.height();
cambia altura.
.width();
cambia ancho.
.css();
altera propiedades de el css.
EJ:
css('atributoCss','valor');
.html();
ncida.
.val();
os.
.on();
elementos creados despues
obtener el contenido del primer elemento que coi

obtener los valores de los elem en los formulari
Se usa despues de que se cargo el html, para los
$(document).on('evento', 'selector', funcion() {
Realiza una accin!
});
Investigar bien:
.hover();
.click();
.dblclick();
pasar el mouse por encima

Click en elem
Doble Click en elem
.mouseenter();
.mouseleave();
mouse arriba del elemento, entra al elem

mouse deja el elemento
.focus();
.animate();
es para elemento como inputs y textarea
LINK PARA ANIMACIONES DE JQUERY

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></
script>
------------------------------------------------------------------------------------------GET
solo se usa para recuperar informacion y no debe tener ningun ot
ro efecto
HEAD
es como el get pero sin el cuerpo de respuesta, sirve mas para m
eta-informacion
POST
Enva los datos para que sean procesados por el recurso identifica
do
PUT
Pedido que encierra una entidad para ser almacenada baja el URI
ofecida.
DELETE
Elimina el recurso especificado
TRACE
Reenvia la inforacion obtenida para que el cliente vea si hubo a
lgun cambio.
OPTIONS
Devuelve los metodos HTTP que el servidor sorporta por la URL es
pecificada.
CONNECT
Convierte el pedido de coneccion a una conexion TCP/IP transpare
nte.
PATCH
Aplica modificacion parciales a el recurso.
----------JSON------------------------------------------------------------------------------------------------------COLSULTAS
* Estas ya viene predefinidas para jquery?
.dropdown-toggle
.dropdown-menu
---RTA. SI
* Porque a veces para que tome la clase es con . y otras directamente el nombre
('.clase')
('clase')
---RTA. Depende del tipo de asignacion y funcin
------------------------------------------------------------------------------------------Plugin * DataTable *
Sirve para organizar dinamicamente las columnas.

PACHUPEDIA

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

PACHUPEDIA

Uploaded by

Copyright:

Available Formats

Make a Website

Todo lo contenido dentro de estas etiquetas es la pagina

<!DOCTYPE html> Significa que el documento es HML5

bordes de los elementos

margenes desde fuera del borde

HTML: se ejecuta en cascada, va tomando linea por linea y la va ejecutando

para poner imagenes thumb

Indentacin : es el espacio desde el margen a las lineas de codigo

ancho de la columna, lo que va a ocupar

siempre es asi (esta es necesaria???)

Algunas etiquetas se autocierran como img y link con />

unidad para medida de letras cuando no usamos pixeles

Fuentes incorporadas con CSS

redondear los bordes

* -> selector universal

selecciono el primer elemento de ese bloque

convierte un elemnto en una caja bloque

Acceso por clases

se ejecuta ni bien carga la pagina html en el br

agrega clase a un elemento

para saber el largo de un string

hace algo cuando pasamos con el mouse por encima

seleccionar anidado dentro de anidado

elimina el contenido y todos los descendientes d

obtener el contenido del primer elemento que coi

pasar el mouse por encima

mouse arriba del elemento, entra al elem

es para elemento como inputs y textarea

LINK PARA ANIMACIONES DE JQUERY

You might also like