En css3 y con la regla float podemos hacer que una caja, por ejemplo aside,la ponemos flotante y l apodemos mover a la izquierda o derecha., vemos un ejemplo:
#barralateral{
float:left;
heigt:1080px
}
Esta regla la aplicamos o enlazamos con la caja aside y ,la caja se ira a la izquierda y estara como flotante.ocupando solo lo qu etengamos escrito, para que esa caja se vea hasta abajo debemos agregar un atributo mas: heigt:1080px, agregamos esta nueva regla debajo de float.
Ahora tenemos una caja encima de otra, tendremos que mover la caja section apra que se vea,ya que tenemos encima la aside,esto se consigue asi:
margin left:120px
Esta nueva regla la aplicamos ala caja section.
La nueva regla css3 padding, lo que nos permite es darle margenes a las letras de del titulo por ejemplo, nos permite dar margenes ya sea left,top,etc.
ejemplo
padding left.15px
miércoles, 2 de agosto de 2017
css3
Los archivos de nuestra web deben estar en una carpeta externa de los html, pueden estar dentro de la carpeta principal de la web y es donde pondremos nuestras reglas css3, para que todas o una o varias de nuestras paginas ,enlacen con las reglas css3.
body{ background-color:#00F;}
Con esta regla css3 y siempre que enlacemos una pagina a esta regla conseguiremos que la caja body cambie de color.
Hay varias formas de reglas de css3.
Estilo id= se usa par auna cosa determinada y solamente uno para cada cosa, ejemplo:
#cabeceraweb{
background-color:#00F;
}
Esto es una regla de tipo id.la forma de usarlo es:
cuando tenemos creado este nuevo estilo unico llamado cabeceraweb, debemos ir al codigo html y donde queramos usarlo hay que ponerlo como un atributo, por ejemplo en el header,vemos el ejemplo:
<header ide="cabeceraweb">
En el codigo html no hay que poner #, este estilo que hemos creado es unico para esta web,no podemos usarlo para otras cosas.
body{ background-color:#00F;}
Con esta regla css3 y siempre que enlacemos una pagina a esta regla conseguiremos que la caja body cambie de color.
Hay varias formas de reglas de css3.
Estilo id= se usa par auna cosa determinada y solamente uno para cada cosa, ejemplo:
#cabeceraweb{
background-color:#00F;
}
Esto es una regla de tipo id.la forma de usarlo es:
cuando tenemos creado este nuevo estilo unico llamado cabeceraweb, debemos ir al codigo html y donde queramos usarlo hay que ponerlo como un atributo, por ejemplo en el header,vemos el ejemplo:
<header ide="cabeceraweb">
En el codigo html no hay que poner #, este estilo que hemos creado es unico para esta web,no podemos usarlo para otras cosas.
Nuevas etiquetas html5
<mark>....</mark>
Da algo de importancia al párrafo o palabra que queramos,
<em>...</em>
Enfatiza el texto o la palabra que queramos, y la pone en cursiva.
<strong>...</stron>
Le da importancia al texto o palabra que queramos, la pone en negrita,
<small>...</small>
se usa en el footer, para información legal y lo que hace esta etiqueta es hacer pequeña las letras.
<cite>...</cite>
Esta etiqueta es importante para el navegador, se usa cuando en un párrafo hay nombres de películas,nombres de libros, o algo propio nuestro (algún articulo,etc), hay que ponerlo para la estructura de la web.
<address>...</address>
Se usa para la información de contacto, en la footer, debe de arropa nuestra información de contacto, es estructural, y no se vera nada en la web.
<time>....</time>
Este atributo hay que ponerlo cuando por ejemplo en una noticia ,ponemos una foto y debajo,le ponemos la fecha que se hizo, este atributo es estructural y hay que meter la fecha en el .
Da algo de importancia al párrafo o palabra que queramos,
<em>...</em>
Enfatiza el texto o la palabra que queramos, y la pone en cursiva.
<strong>...</stron>
Le da importancia al texto o palabra que queramos, la pone en negrita,
<small>...</small>
se usa en el footer, para información legal y lo que hace esta etiqueta es hacer pequeña las letras.
<cite>...</cite>
Esta etiqueta es importante para el navegador, se usa cuando en un párrafo hay nombres de películas,nombres de libros, o algo propio nuestro (algún articulo,etc), hay que ponerlo para la estructura de la web.
<address>...</address>
Se usa para la información de contacto, en la footer, debe de arropa nuestra información de contacto, es estructural, y no se vera nada en la web.
<time>....</time>
Este atributo hay que ponerlo cuando por ejemplo en una noticia ,ponemos una foto y debajo,le ponemos la fecha que se hizo, este atributo es estructural y hay que meter la fecha en el .
Etiquetas article,figure
<article>....</article>
Se usa para agrupar cosas que son del mismo tema, ejemplo agrupar párrafos que hablen de lo mismo, suelen estar dentro del cajón <section>...</section>.
De cara al usuario no se ve nada,son de tema estructural.ejemplo:
<article>
<p>hola 1</p>
<p>como esta 1</p>
<p>adios 1</p>
</article>
Estas cosas tienen relación y por eso van dentro de article.
La etiqueta <header>...</header> tambien pueden ir dentro de la caja <section>....</section> y también en la caja <footer>...</footer>, seria como una micro web, aunque el cajón header es la principal y el header de section y footer no es tan importante
<figure>...</figure>
Esta etiqueta se usa par introducir fotos,videos,elementos independientes,etc, se introducen el la caja <section>....</section>, ejemplo
<section>
<figure>
<img scr="url de la foto"/>
</figure>
</section>
Los formatos de imagen mas comunes son jpg,git o png,
Se usa para agrupar cosas que son del mismo tema, ejemplo agrupar párrafos que hablen de lo mismo, suelen estar dentro del cajón <section>...</section>.
De cara al usuario no se ve nada,son de tema estructural.ejemplo:
<article>
<p>hola 1</p>
<p>como esta 1</p>
<p>adios 1</p>
</article>
Estas cosas tienen relación y por eso van dentro de article.
La etiqueta <header>...</header> tambien pueden ir dentro de la caja <section>....</section> y también en la caja <footer>...</footer>, seria como una micro web, aunque el cajón header es la principal y el header de section y footer no es tan importante
<figure>...</figure>
Esta etiqueta se usa par introducir fotos,videos,elementos independientes,etc, se introducen el la caja <section>....</section>, ejemplo
<section>
<figure>
<img scr="url de la foto"/>
</figure>
</section>
Los formatos de imagen mas comunes son jpg,git o png,
listas ul, aside,section,footer en html5
Las listas <ul> .....</ul> son listas en las cuales los elementos no tienen prioridad, no estan ordenados.Normalmente van colocadas en la caja <nav>....</nav>
<ul>
<li>números</li>
<li>letras</li>
<li>signos</li>
</ul>
en esta lista ,aparecerá así:
numero
letras
signos
<aside>.....</aside>
Es la caja que vamos a poner como barra lateral, ya sea en la parte derecha o izquierda,(es lo normal), aunque podemos no ponerla ,no es necesaria.es una caja de estructura.
<section>....</section>
Es una caja de estructura y es la caja principal, donde va a ir la información que queramos que se vea en la web
<footer>...</footer>
Es el cajeado de la parte de abajo de la web, es de estructura, hay que ponerlo , si tenemos pensado escribir cosas como ejemplo, forma de contacto,coping, etc
<ul>
<li>números</li>
<li>letras</li>
<li>signos</li>
</ul>
en esta lista ,aparecerá así:
numero
letras
signos
<aside>.....</aside>
Es la caja que vamos a poner como barra lateral, ya sea en la parte derecha o izquierda,(es lo normal), aunque podemos no ponerla ,no es necesaria.es una caja de estructura.
<section>....</section>
Es una caja de estructura y es la caja principal, donde va a ir la información que queramos que se vea en la web
<footer>...</footer>
Es el cajeado de la parte de abajo de la web, es de estructura, hay que ponerlo , si tenemos pensado escribir cosas como ejemplo, forma de contacto,coping, etc
Etiquetas de estructura html5
<title>.....</title>
Es una etiqueta de estructura, va colocada, dentro de la etiqueta <head>, y es fundamental.
Indica de forma simple y concisa ,la temática de nuestra web, de que va nuestra web, es fundamental para que los buscadores sepan de que va y nos sitúen en buena posición.
<link>
Es una etiqueta fundamental y lo que nos hace es unir las reglas externas css con nuestra estructura html. esta es la forma:
<link href="url" rel="styleheet"/>
link nos une css y html
href, indica la url de las hojas de estilo css
rel indica que son hojas de estilo y hay que ponerlo siempre.
El body ahora en html5 se estructura de la siguiente forma:
cabecera <header>.....</header>
navegacion <nav>....</nav>
barra lateral <aside>....</aside>
contenido principal <section>...</section>
información institucional <footer>...</footer>
Dentro del <headder> debe ir <h1> que es el titulo principal de la web, y solo debe haber 1 en la web.
hay mas títulos no tan importantes, h2,h3,h4,h5 y h6.
Si hay varios títulos relacionados de un mismo tema,deben ir precedidos de < hgroup>...</hgroup> es para indicarle al navegador que tienen relación y son de tema estructural, en la web no se vera nada.
Es una etiqueta de estructura, va colocada, dentro de la etiqueta <head>, y es fundamental.
Indica de forma simple y concisa ,la temática de nuestra web, de que va nuestra web, es fundamental para que los buscadores sepan de que va y nos sitúen en buena posición.
<link>
Es una etiqueta fundamental y lo que nos hace es unir las reglas externas css con nuestra estructura html. esta es la forma:
<link href="url" rel="styleheet"/>
link nos une css y html
href, indica la url de las hojas de estilo css
rel indica que son hojas de estilo y hay que ponerlo siempre.
El body ahora en html5 se estructura de la siguiente forma:
cabecera <header>.....</header>
navegacion <nav>....</nav>
barra lateral <aside>....</aside>
contenido principal <section>...</section>
información institucional <footer>...</footer>
Dentro del <headder> debe ir <h1> que es el titulo principal de la web, y solo debe haber 1 en la web.
hay mas títulos no tan importantes, h2,h3,h4,h5 y h6.
Si hay varios títulos relacionados de un mismo tema,deben ir precedidos de < hgroup>...</hgroup> es para indicarle al navegador que tienen relación y son de tema estructural, en la web no se vera nada.
martes, 1 de agosto de 2017
Que es html5?
HTML5.
Es un estándar que auna las tecnologias html, la tecnología css y la tecnología javascript.
HTML.
Con esta tecnología lo que conseguimos es la estructura de la pagina web.
CSS.
Con esta tecnología conseguimos la apariencia de la web.
JAVASCRIPT.
Con esta tecnología conseguimos animación e interacción.
Toda pagina web se empieza por los cimientos, (estructura o html) después con css de damos apariencia. y por ultimo se agregan cosas interactivas y se le va mas vida ,con javascript.
El comienzo de este curso lo haremos con el bloc de notas, así empezamos desde cero.El lenguaje html es un lenguaje de etiquetas. La etiqueta es un código que va dentro de los corchetes de mayor y menos, < ...> y normalmente nas en parejas de apertura y cierre. <...> </..>.
La primera etiqueta de la estructura es < !DOCTYPE HTML> es la instruccion que informa a los navegadores y a los programadores de que versión de html esta hecha la pagina, en este caso se trata de html5.
Después del doctype y en la cabecera va <html> y en el final de la web cierre con </html>.
Dentro de la etiqueta <html> van otras etiquetas ,la primera es <head>con su correspondiente cierre </head>
La información que va dentro del head,no se ve en la web, solamente la etiqueta <title> y </title> que es el titulo de la web y sera lo que veamos en la pestaña de la web.
Dentro también de head también van las etiquetas de estructura <meta> </meta>, que son de estructura general, e informan por ejemplo de el sistema de caracteres que esta hecha la web,
ejemplo:
<meta charset="utf-8">
Esta etiqueta no tiene cierr.
La etiqueta meta tiene atributos,que son información adicional,ejemplo:
<meta name="description" content="pagina enseñanza">
Este meta describe de que va nuestra pagina en este caso seria de enseñanza y asi los navegadores nos categorizan.
<meta name="keywords" content="html,css3,javacript,diseñoweb"/>
Este meta lo que indica es que la web se dedica a programacion,html,css3......
Otro atributo a tener en cuenta es "lang" que informa del lenguaje que estamos usando, ejemplo:
<html lang="es"/>
Indica que nuestra pagina web esta hecah en leguaje español
Es un estándar que auna las tecnologias html, la tecnología css y la tecnología javascript.
HTML.
Con esta tecnología lo que conseguimos es la estructura de la pagina web.
CSS.
Con esta tecnología conseguimos la apariencia de la web.
JAVASCRIPT.
Con esta tecnología conseguimos animación e interacción.
Toda pagina web se empieza por los cimientos, (estructura o html) después con css de damos apariencia. y por ultimo se agregan cosas interactivas y se le va mas vida ,con javascript.
El comienzo de este curso lo haremos con el bloc de notas, así empezamos desde cero.El lenguaje html es un lenguaje de etiquetas. La etiqueta es un código que va dentro de los corchetes de mayor y menos, < ...> y normalmente nas en parejas de apertura y cierre. <...> </..>.
La primera etiqueta de la estructura es < !DOCTYPE HTML> es la instruccion que informa a los navegadores y a los programadores de que versión de html esta hecha la pagina, en este caso se trata de html5.
Después del doctype y en la cabecera va <html> y en el final de la web cierre con </html>.
Dentro de la etiqueta <html> van otras etiquetas ,la primera es <head>con su correspondiente cierre </head>
La información que va dentro del head,no se ve en la web, solamente la etiqueta <title> y </title> que es el titulo de la web y sera lo que veamos en la pestaña de la web.
Dentro también de head también van las etiquetas de estructura <meta> </meta>, que son de estructura general, e informan por ejemplo de el sistema de caracteres que esta hecha la web,
ejemplo:
<meta charset="utf-8">
Esta etiqueta no tiene cierr.
La etiqueta meta tiene atributos,que son información adicional,ejemplo:
<meta name="description" content="pagina enseñanza">
Este meta describe de que va nuestra pagina en este caso seria de enseñanza y asi los navegadores nos categorizan.
<meta name="keywords" content="html,css3,javacript,diseñoweb"/>
Este meta lo que indica es que la web se dedica a programacion,html,css3......
Otro atributo a tener en cuenta es "lang" que informa del lenguaje que estamos usando, ejemplo:
<html lang="es"/>
Indica que nuestra pagina web esta hecah en leguaje español
Suscribirse a:
Entradas (Atom)