Está en la página 1de 5

HTML

Se debe iniciar con <!DOCTYPEhtml> desde la primera lnea con


<html> y la ultima con </html>
El texto dentro de <> se llama etiqueta, etiqueta de inicio <html> y
etiqueta de cierre es </html>
El archivo html esta formado por dos partes es encabezado y el cuerpo
El encabezado tiene la informacin del html como por ejemplo su titulo
Las primeras etiquetas son <head>, <title>, <body> los prrafos
empiezan con <p>,
Los ttulos o palabras con diferente tamao se utiliza con las etiquetas
<h1> a esto se llama encabezados
Para elaborar hipervnculos se debe inicia con la etiqueta <a
href=www.google.com> descripcin</p>
Para insertar imgenes se empieza por una etiqueta especial <img
src=url de la imagen/>
Para que una imagen se convierta en hipervnculo, se debe proceder a la
misma forma para elaborar hipervnculos con la diferencia de que en vez
de la descripcin se ponde toda la etiqueta de la imagen y luego se
cierra la etiqueta.
Para elaborar listas ordenadas numeradas se debe iniciar con la etiqueta
<ol> dentro de la etiqueta se enlista con las etiquetas <li></li> y luego
se cierra con la etiqueta </ol>
Para elaborar lista no ordenadas es decir que no estn enumeradas si no
con vietas entonces iniciamos con la etiqueta <ul> y cerramos con
</ul>
Para elaborar un comentario se debe iniciar con <!y terminar con -->
el comentario sirve para hacernos recordar sobre algo en el cdigo, no
se muestra en la pgina web solo en el cdigo.
Para modificar el tamao de las letras debemos aumentar en este caso
en un prrafo <p style=font-size:12px> y terminar con </p>
Para modificar el color debemos iniciar en este caso con un encabezado
<h1 style=color:red> y para hacerlo al mismo tiempo color y tamao
de letra solamente separamos con punto y coma como : <h1
style=color :blue;Font-size:12pz>
Para modificar en tipo de fuente se empieza con la etiqueta: <p
style=Font-family: Arial>
Para poner fondo ya sea la cuerpo como a otras etiquetas se debe iniciar
con la etiqueta : <body style=background-color: red
Para alinear los textos ya sea en el medio, izquierda o derecha se debe
iniciar con la etiqueta: <ol style=text align: center>
Para cambiar la apariencian del texto en este caso cambiar a negrita se
debe iniciar encerrar el texto con la etqueta <strong> para cursiva se
utiliza la etiqueta <em>

Para crear una tabla ponemos nuestras etiquetas <table></table>


dentro de estas etiquetas (ya creado la tabla) debemos crear filas y se
procede a escribir <tr></tr> y luego para crear la celda ponemos
<td></td> y ponemos cualquier cosa en medio de los mismos.
Las etiquetas <thead> y <tbody> se ponen dentro de las etiquetas
tabla, el primero sirve para poner ttulos a las columnas con <th> pero
primero se debe crear un fila con <tr> y en el tbody entra todas la
celdas de la filas.
Cuando queremos poner un nombre a la tabla necesitamos que una
celda ocupe el tamao de 1 o mas celdas para eso debemos agregar el
atributo colspan a la etiqueta por ejemplo: <th colspan=3></th>
Usamos el <div> cuando queremos dividir la pagina en bloques, cada
div puede tener distintos tipos de atributos que se les puede aadir
como por ejemplo : <div style=width: 50px; height: 50px>
Usamos <span> cuando queremos cambiar el atributo de palabras
solamente a que rodearlas con las etiquetas por ejemplo para modificar
el color de una palabra: <span style=color:red></span>
Para que el enlace se abra en otra pestaa debemos aadir a la etiqueta
:target=_blank
Para crear enlaces para que nos lleve a elementos especficos de nuestra
pagina tenemos que nombrar los elementos de la siguiente manera: <h1
id=fundamentos></h1> luego debemos crear otra etiqueta en el
lugar mas lejano de la pagina (por el final) para retornar a este
encabezado con: <a href=#fundamentos>IR A FUNDAMENTOS</a>
Para crear enlaces con descarga debemos aumentar la etiqueta: <a
href=https://devcode.com/static/logo.png>DESCARGAR LOGO</a>
Para definir el grosor del borde de las tablas y el color de las mismas se
debe poner la siguiente propiedad: border=2px solid red
CSS
Este lenguaje se utiliza para que la estructura html sea mas atractiva,
adems de que este lenguaje se escribe aparte en otra hoja, y esta
misma hoja en CSS se puede aplicar a otras hojas html lo que
permite un ahorro de tiempo tambin que se pueden aplicar mas de
una hoja de CSS para una sola estructura de html.
La forma en que se aplica CSS auna hoja html es armando con
etiquetas especificas en la estructura html y luego en la hoja CSS
aplicar la mejora o modificacin con la sintaxis del CSS
Para que la hoja de CSS sea reconocida por html debemos poner una
etiqueta con tres atributos como ser: <link type=text/css
rel=stylesheet href=stylesheet.css>
Un selector en un CSS es una etiqueta sin <> como p, h1,span,etc
seguido de una llave se aade el par propiedad: valor donde la

propiedad es color, Font-family, etc. y el valor puede ser Blue, Arial,


24px, etc. Seguido de ; siempre y por ultimo cerrando la llave.
Los comentarios en CSS se escribe de la siguiente manera:
/*COMENTARIO*/
Los colores en CSS son muy variados ya que se puede modificar
objetos con colores segn un cdigo hexadecimal, que se forma del
0-9 y de las letras de a-f y con esto se forma todo tipo de colores, los
colores siempre estn formados por 6 caracteres precedido por un
numeral #.
Otra forma de modificar el tamao de los textos es utilizar los em
en lugar de los pixeles, 1em es tamao normal, 2em el doble de
tamao y 0,5 la mitad del tamao normal.
Otra de las ventajas de CSS es que puedes poner diferentes valores a
la propiedad Font-family como Verdana, Times, Courier,etc. Esto
significa que cuando el usuario vea la pagina y no tenga en su
computadora la fuente /Verdana el texto se mostrara en Times o en la
fuente que tenga el computador del usuario.
En css para las tablas poner el borde se debe seguir la siguiente
forma: border: 2px solid blue
Para elaborar botones u objetos parecidos utilizamos height,width,
border-color, background-color, border-style, border-width, borderradius, etc.
Para poder cambiar el color de algn texto que este en un elemento que
esta anidado con otros elementos solamente aadimos en el selector
esos elementos por ejemplo: div div div h3 { color:red;}
Usamos el selector universal * para modificar el estilo en cada elemento
de la pgina segn la propiedad y valor correspondiente.
Para que un borde tenga un grosor, tipo de borde y color podemos
escribirlo fcilmente de la siguiente manera: border:solid 2px #cc0000;
Cuando tenemos etiquetas o elementos anidados con muchos div , li,
etc. Entoncespara no escribir div las veces que es solamente ponemos
de la siguiente manera: div > p { propiedad:valor
Cuando queremos cambiar el estilo de algn elemento lo podemos hacer
por clases de la siguiente manera: <h1 class=NOMBRE></h1> y
luego en el css se puede modificar de la siguiente manera: .NOMBRE
{propiedad:valor}, esto se puede aplicar a cada etiqueta o elemento que
tenga la clase que se quiera modificar
Los id se aplican cuando tienes un solo elemento al que tiene que tener
cierto estilo y se lo pone en el html de la siguiente manera: <h2
id=serio></h2>, y en el CSS se puede modificar cualquier cosa con :
#serio {propiedad:valor}
Los pseudclases son modificaciones que se hacen sobre los enlaces en la
cual podemos hacer que cuando el usuario pase su puntero del mouse
sobre los enlaces podemos hacer que se comporten de una manera
particular, ya se que se los haya clikeado, solo pasado y no clikeado. Y

se utiliza la siguiente sintaxis: p: visited {propiedad:valor}, se puede


utilizar los siguientes a:link ,a:hover :visited.
Otra etiqueta que se utiliza como pseudoclase es las p:first-child {}, esto
lo que hace es que el primer hijo de una serie de elementos iguales
tendr un cambio en funcin de que se aplique a la hoja css.
Se utiliza la etiqueta p:nth-child(2) para que se modifique los hijos que
no son el primero comenzando por el segundo hasta el ensimo hijo, los
cuales tendrn propiedades diferentes.
La nueva propiedad que utilizaremos es el display que nos ayuda al
posicionamiento de los elementos de la pagina web como ser el display
el cual tiene diferentes valores como son:
Block es una valor en el que el elemento ocupa todo el ancho de la
pagina web
Inline-block es un valor en el que un elemento puede tener a otros a su
lado a lo ancho de la pagina web. Estos dos primeros valores hace que
los elementos conserven su apariencia de bloque.
Los valores inline que hace que los elementos estn en un sola lnea lado
a lado pero no en su forma de bloque si no en forma de prrafos,
encabezados, etc y none hace que desaparezcan de la pagina .
Otros de los valores que vamos a utilizar en las cajas son: margin es un
espacio en el cual el elemento esta distante de los dems elementos que
lo redean adems para ser mas especficos pordemos nombrar
margin:auto para que las distancias sean iguales para todos los lados,
pero cuando queremos modificar 1px arriba 2px a la derecha 3px abajo y
4 px a la izquierda seria de esta forma margin:1px 2px 3px 4px;, border
se utiliza de la forma border: 2px solid #ff0000; padding es el relleno
entre el borde y el contenido se anota de la siguiente forma como
padding: 10px 20px 30px 40px ;
Otro valor que utilizamos es el float que sirve para acomodar cualquier
elemento dentro de la pagina web
Clear es una propiedad que hace que el elemento se aleje de otro
elemento que esta a su derecha o izquierda para estar debajo de ese
elemento a la derecha o izquierda y se utiliza el valor both para que se
aleje de ambos.
Otra propiedad tambin utilizada como el position: absolute que sirve
para que este elemento sea la nueva hoja de html de los que estn
adentro de esta caja por asi decirlo.
Relative y static investigar
El valor fixed para la propiedad de position hace que un elemento quede
fijo en el navegador incluso mientras la barra de desplazamiento esta
bajando o subiendo siempre se mantiene en la pantalla.
PSEUDOELEMENTOS son de la forma p::after { Font-size=20px;} tambin
puede funcionar con before, after, first-letter, first-line

PAGINAS DE COLORES PARA CSS: http://www.color-hex.com