Notas Sobre El Curso Desarrollo Web

<html>
>>>>>>> el inicio de la etiqueta este <html> es la incial y este es e

l final </html>
<head></head> >>>>> esta etiqueta se colocan subetiquetas como el titulo codigos
de java scrit o codigo q no se ve incia con <head> y finaliza con </head>
<boby></boby> >>>>> es el contenido del que presentara la pagina
</html>
<!DOCTYPE html> es una directiva que deve de llevar muy especifico paraevitar p
roblemas en el navegador este creo q es un ejemplo de html5
<meta charset="uft-8"> esto significa para todo aquel lenguaje de europa occiden
tal
xhtml5
<meta http-equiv="content-type" content="text/html; charset= uft-8" se utiliz e
n html 4.01
<meta name="description" content="es una pagina con meta datos"> nos dice la des
cricion de lo q es en este caso q es una pagina que contiene meta datos
<meta name="keywords" content="HTML, CSS, JavaScript"> con esto los buscadores n
os van analizar
<meta name="author" content="zeus">
para poner el titulo se usa <h1> y </h1>
poner un comentarios se usa 
poner parrafos <p>, </p>
poner ligas <a>, </a>
pd todo esto se ve dos tipo uno de bloque o de carro q encciera la palabra en un
cuadro formando unbloque y asi su espacio, luego esta liga q es unir o seguir u
na palabra una continua ala otra
á este se remplaza una vocal de caracteres especiales como la tilde y se
remplaza
ñ esto sirve para quitar la letra
« << '
» >>
á
ñ
«
»
<strong></strong> es para poner en negritas las letras
<em></em> letra cursiva
<ol>
<ul>
<li>
ul y
order list
unorderlist
list item
ol son de bloque osea nos deja en una linea
<dl> definetion list >>>> "es para comenzar hacer una cita"
<dt> es para poner nombre ala cita "esta seria el titulo"
<dd> es para poner la deficion de la cita
<a> href="" esto seria para poner un hiper vinculo href
<a> href"" title="" aqui el atributo con su nombre osea su titulo e quedaria mas
especifico asi <a href="link" title="">zeus</a>
<h2><a id="primera"></<a> priemra</h2> esto es aser punto de referencia en la pa
gina ya co otra etiqueta llamarlo
<p><a href="#primera"></a>
-----------------------------------------------------------------------------<img src="imagen.jpg" width="300" alt="soy nuevo" title="soy nuevo"/> insertar u
na imagen
<table border="1px" width="80%">
<tr>
<td width"100%"></td> en los titulos de tabla se puede utilizar lo q es th ya q
lo pone de modo central y en negrita
</tr>
----------------------------------------------------------------------------------------------------------------------otras etiquetas
<br/> salto suave
<hr> dividir con una linea horizontal la pagina
espacio como sangria
€ euro
©
® ™ marca registrada
<adrees></adress> aqui viene la direccion y se le puede meter datos extras como
lamarca registrada y incluso un apartado de lo q se vende
<blockquote></blockquote> tipo de cita
<cite></cite> una cita como marcar la funete bibliografica
-------------------------------------------------------------------------------------------------------------------------------------------<div id="algo"> </div> este en el body
<stype></stype> esto es dentro del head
body{
width: 70%;
}
background-color= #code;
border: 1px solid #code;
--------------------------------------------------------------------------------------------------------------------------------------------unidad 2
<p style="background-color:#6676D7">
<p style="background-color:#code"> para poner color adentro de una un parrafo; e
sto es adnetro de la etiqueta no recomendable
luego esta adentro de la pagina es la q habitualente hacemos en el head
y afuera de la pagina externo
que comensaria borrando y copiando lo q esta en style
<link href="imagen" rel="stylesheet" type="tex/css"/> rel: es lo q estamos habla
ndo type: de qlo q es
1) es usar cc adentro de la etiqueta no recomendalbe ejm: <p style="background-c
olor: #code;>
2) adentro de la pagina en head: lo q ya tenemos en la pagina
3) externo una conbinacion o tener el css afuera ejm: <link href="link" rel:"sty
lesheet" type:"text/css"/>
para darle color alas letras seria solo poner abajo color:#code;
----------------------------------------------------------------------------------------------------------------------------------------------/*comentario en css */ mas q todo se usaran para tener una paleta de colores que
se usaran en las paginas y no hacer desorden
--------------------------------------------------------------------------------------------------------------------------------------------fonf-family:fuente esto se usa para poner la fuente de la caja que se esta uti
lizando
fonf-size: aqui puede ser como px, %: un ejemplo seria para los titulos h1 asi q
se pone enarriba del wrraper: h1 { font-size: 150% }
text-alingn es para poner la letra izquierda o derecha o como uno quiera y depen
de de que estamso hablando si es en h1 pues se mueven tods los 1 con el font-li
gn
TIPO
1)font-family >>>>> familia de fuente osea tipo de fuente
fuentes
2)font-size >>>>>>> tamao de fuente
%
3)letter-spacing >>>>>> espacio entre las letras

px
4)text-align >>>>>>>> alinear texto
posicional
5)line-higth >>>>>>>> altura de linea
em
-----------------------------------------------------------------------------------------------------------------------------------------------------esto tiene un orden y es la siguiente
a{
text-decoration:none;
es para quitarle el marcado de la linea
}
a:link{
color:#00A388; es para cambiarle el color cuando el enlace no se a tocad
o
}
a:visited{
color:#79BD8F; cambiar el color del enlace cuando ya se a visitado
}
a:hover{
color:#FF6138;
text-decoration:underline; cambiar el color y la decoracion cuando se p
one encima el raton
}
a:active{
color:#FFFF9D;
background-color:#BEEB9F; cambiar el colo y el color del relleno al mom
ento de darle clip por eso ative
---------------------------------------------------------------------------------------------------------------------------------------------------------------umm como ultilizar bien los css externos ponien exepciones para no modificar en
si la pagina orignal el code
y haci porder hacer tipo estaciones en la misma pagina conectandolo cierto tiemp
o o ocacional por medio de un enlace externo
aunq se puede hacer de 3 manerase
1 adentro del la billeta
2 una exepcion adentro del style
3 por medio de aun archivo extreno
---------------------------------------------------------------------------------------------------------------------------------------------------------------esta parte se trata de como usar las clases recordando qu el orden seria
etiquetas
edentificadores
clases
una clase se miraria asi
.palabra{
{
y va hacer funcion poniendo esto en una palabra ejemplo palabra
<span class="palabra">hola mundo</span>
---------------------------------------------------------------------------------------------------------------------------------------------------------------este para quitar los margenes es con
* margin:0;
luego de ultimo van unas reglas se me olvidaron como se llaman
pero son
para poner letras en un parrofo ordenado y numeros
esta
ol il es para poder modificar el il adentro de ol
ol ol il es para modificar el il q esta adentro de ol y en otro ol luego el il
tambien esta como modificar los enclaces que estan adentro de una caja en especi
fico
#caja a
y se pone lo q se le quiere hacer
tambien esta la modificaion en conjunto cuando los titulos quieren modificarse
h1, h2, h3, h4
lo q se quiere modificar le pueden cambiar la lerra color y tamao para todos los
titulos asi como h1 como h2 segun convenga
------------------------------------------------------------------------------------------------------------------------------------------------------------------trbl
top
------------------------------------------------------------------|
|
|
|
|right
left|
|
|
|
|
|
|
|
|-------------------------------------------------------------------botton
orden primero va
top
right
botton
left
p margin:em
se puede hacer tipo multiplicacion cuando es el margen con todos los trbl
p
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------los tipos de borden son
solid es una sola linea
dashed son linieas entre cortadas
double puntos
un ejemolo
h1{
border-bottom:medida color o tipo y color; 5px solid black;
}
-----------------------------------------------------------------------------------------------------------------------------------------------padding
umm el pagin se asemaja alo q es el borde es muy intresante usarlo ya q podemos
mover un bloque hacia un lado usando un padding o dandole forma adentro de un bo
rde un espacio o darle simetira alo q es la caja
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------que es widht?
es ancho
es la manera de como manejamos el widht margin: o auto lo hacemos en la caja pri
ncipal para comprometer alos demas
margin: 0 auto;
widht: 80% si lo queremos auto
widht:400px; es si lo queremos fijo
esto se tratara en el contenido o weeaper o la caja principal
--------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------------background-image:url(../link); este es para introducir imagenes abajo del texto

o como fondo de una pagina o poner simplemente imagnes
el background-imagen este sirve para poner la imagen osea da la sentencia q tien
e q poner una imagen
el url(../link de la imagen) este es para intrdocir la imagen la podemos meter t
anto en las cajas como los parrafos o un encabezado en especifico
background-image:url(../imagen);
esto es para poner la imagen adentro de una
seccion apartir de las css
background-repeat:repeat-x; repeat-y; no-repeat; es
background-position:center;
background-size:100%
background-attachment:fixed;
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------es primero dividir el encabezado ya poniendo el titulo como titulo
y haciedo uno nuevo q sera el articulo
luego poner un identificado que seria el menu o nav q seria el navegador
este hacer una lista con los siguientes enunciados
<div id="nav">
home
dioses
diosas
semidioses
animales mitologicos
la iliada
un ul
luego por medio de una regla anidada
nav il{ display:unline;
}
display es la manera de como estara la lista
sabemos bien q el li es de bloque
ay q poner ligas recordando como seponen usando <a href="link">palabra</a>
luego cambiar el color a negro y centrando lo q es los menus usando margen
margin-top:10px;
margin-left:240px;
margin-bottom:
todo esto provocando una exepcion que seria la a q es el enlace
#nav a{
}
luego para darle espacio al menu se usa el |
luego hacer q este masr cerca el menu manejando el padding
las | se ponen de otro color dandole tipo de color base al contendido o wrraper
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------primero modificar lo q es el menu este comentando lo q es margen y aliniar centr
almente por
text-align:center poner color negro la letra
Luego ai mismo se pone un padding con las siguientes medidas lo q es 5px 10px 4p
x 10px
border-bottom:#8c8c8c;
luego se quita el espacio q esta en el codigo de la pgina que seria &nbsp
list-style-type:none esto en el li
#nav a{
color 000
background-color:ffeda0
border:1px solid #8c8c8c8;
}
esto es para darle una forma tabulada
luego pondres un hover
#nav a:hover {
color
text-decoration:none
border-bottom:none
background-color:pink;
es cuando tenemos arriva el raton sobre la letras y asi cambia lo q es osea es l
o mismo q lo de abajo
#nav a:hover #diosas #opc 3 a { esto se utiliza para cunado la pagina donde stam
so en el menu se homogenise osea se mire q sea uno solo con el q esta proximo a
el para eso se usa id se pone un id en el body con el titulo de la pagina y vari
as id con nombres de opciones q van a air en la a del enlace
color
#nav a:hover, #diosas #opc3 a{
color:black;
background-color:#9B0E92;
border-bottom:none;
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------media="screen" es para visualizarlo en los monitores normales de una computadora
media="print" es para imprimir
para imprimir tenemos q borrar todos los colores imagenes abajo del texto y pone
rlo fijo que seria de esta manera
windth:800px
margin:0 auto;
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------flujo y aposicionamiento como se mueven als cajas
vamos a crear otra pagina llamada posicionamiento
ai vamos aponer los style y poner nuestros css
ay q poner las cajas crearemos 3 como caja uno caja dos y caja 3
luego eso en general con la etiqueta div alterar lo q es el
fondo
padding10px
margin 5px y
un borde unpx solid color
windth 200px
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------como hacer flotar las cajas
comandos
#uno{
flot:rigth
}
#dos{
flot:rigth
}
#tres{
flot:rigth
} las cajas se pone de una forma horizontal en una misma linea
luego q ya n quiera la flotacion tengo q usar un comando que se llama clear

para q no se encime
#tres{
clear:both;
}
}
#uno {
float:left;
}
#dos{
float:right;
}
#tres{
clear:both;
ahora con imagenes
este primero usaremos una imagen de afrobita colocandola adentro de la etiqueta
del parrafo
luego aremos una clase q nos de referencia donde quiere q se vaya
extra nota:
el padding es el q le da espacio entre el borde y el contenido
el margen es el q separa las cajas del borde a borde
.izq{
float:left
padding:3px
margin-rigth:10px
margin-botton:10px
luego vemos q la imagen es muy grande vamos a tomar encuenta la altura de la ima
gen q seria height
luego paa la tercera imagne es muy grande vamos a centralo usando el tamao de la
imagen junto con el width q deveriamos saerlo cuando lo consultamos y poner un p
oco ams delo q es la imagen
luego de eso el margin poniendo un margin de 5px parra q se separe un poco de ar
riba y abajo y auto para izquiera y derecha con eso vamos a centrar la imagen os
ea la caja
{
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ezpyna11
aposicionamiento absoluto
vamos a tener una caja a esa caja le meteremos una imagen y la vamos a comodas
bacground-image:url()
higth:196px
background-repet:no-repet;
background-size:cover
left:100px 300 500
top:50
250 350
luego las 3 cajas restantes ponerles unas imagenes de afrobita las que mencionan
aquiatena,afrobita,poseidon estas son las 3 imagens q vamos a utilizar
vamos aponer la posicion absoluta
position:absolute;
luego creamos wrraper para la caja q va acubrir todas las cajas y lo vams a cent
rar y lo vamos a poner una position relative
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------lession 2 -primera seccion:formayo de paginas con css
formato de paginas fijas = layout

este toda pagina debe de tener 960px para tener un buen diseo para esot vamos a a
rmar una pagina web
con las famosas etiquetas
desde la coperativa <doctype> a </html> bueno comenzamos en hacer lo q seria el e
squeleto apra eso vamos hacer 5 cajas
una que se llamara wraper otra como encabezado, contenido esta se va a dividir e
n dos izq, der. y pie de pagina
lo aramomos la divisiones luego vamos hacer las medidas vamos a manejar una secc
ion de neutralidadque estaria comprendido con el siguiente ejemplo
h1, h2, h3, h4, h6, body, html{
padding:0;
margin:0;
}
luego de esto vamos a poner ambiente ala cajas ya hechas comenzando con body y h
tml para tener un color de referencia me imgaino para ver si ay error
body, html{
background-color:#color;
}
pd: para esto vamos a dejar una seccion q simepre tenemos q ponder comor eferecn
ia de los colores a trabajar
luego el de wraper
#wraper{
background-color:color;
width:960px
height:800px;
margin:0 auto;
}
luego las demas cajas
#encabezado{
backgorund-color:color;
height:80px;
}
contenido{
background-color:color,
height:560:
}
#izp{
height;560px;
width:512px;
margin-left:32px
margin.righ:16px
float:left
background-color:
}
luego para el columna derecha y luegopie de pagina
vamos a pner la imagen en el inicio del parrafo contenido en la caja, luego de e
sto vamos a decir ala imgen q se aya aun extremo deacuerdo como loqueremos para
esto se necesita una clase quedaria asi
.izquierda{
float:left;
margin:10px
}
luego esto para ambos luego de todo esto vamos a comenzarlo responsiva
por medio de una relga de 3 este tneindo un width como base y los demas se convi
erten en porcentaje aqui jugaremos un poco
este al wraper se le agrega un porcentaje en este ejmplo un 80% en esta etapa qu
e el width en este divicion significa q es el tamao q va atener la pagina en la
pantaa poniendo refencia al tamao de la misma
luego de todo esto queda alcar q seria bnea practica cuando se comienza
luego vamos alo responsiva usando media coris
@media only screen and (max-width:460px){ esto es para telefonos
solo se vna amodificar las etiquetas q sean necesarias ya si solo se pone el mis
mo o algo asi de esa misma indole pues solo se estuvier repitiendo el trabajo ha
y q acordarse el q esta mas cerca la etiqueta es el q modifica
asi pasa aqui pues si solo queremos modificar la altura o el corlor pues solo se
pone eso mas con la condicion q tengamos del media cori asi q solo se modifica
en esas cirucstancia y asi son las paginas responsibas
con el width cambiara a px nada mas en el wraper y el contedgo igual tendra un h
eig en px para el contenido o donde esta la info
#wraper
width:320px
height:auto
#contenido
height:1700px
.izquieda
height:auto
clear:botht
wid:90%
esto se repitira como en la siguente division si queremos modificar ya sea las l
etras o fuentes tamaos incluso padding pues los pueden hacer mencionandolos en su
etiqueta umm solo las modificioncones o agregacion no toda la etiqueta
ahora se va haceruna solo para las tabletas
@media only screen and (min-width:461px) and (max-width:768;)
#wraper
width:90%
height:auto
#encabezado
background-color:
heigh:30px
contenido la altura que tomaria
y las diviciones quitando el folotamiento con su width 90 %
aqui puede modificarse igual para los telefonos el tipo letra imagens incluso to
da la pgina
luego si hemos modificado pues segun me dieron a entender se puede llegar al mis
ma forma originalmente haciendo esto
@media only screen and (min-width:769px) esto va hacer q desde aqui se tome una
referencia de lugar para poder hacer los cambios nomal osea aaqui se pondran los
datos q fueron modificados del wraper
aqui seria bueno investigar mas del caso ya q no importaria

Notas Sobre El Curso Desarrollo Web

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Notas Sobre El Curso Desarrollo Web

Hochgeladen von

Copyright:

Verfügbare Formate

<html>

>>>>>>> el inicio de la etiqueta este <html> es la incial y este es e

3)letter-spacing >>>>>> espacio entre las letras

-----------------------------------------------------------------------------------------------------------------------------------background-image:url(../link); este es para introducir imagenes abajo del texto

luego q ya n quiera la flotacion tengo q usar un comando que se llama clear

formato de paginas fijas = layout

Das könnte Ihnen auch gefallen