JAB Studios S.A.S

Entradas

Mostrando entradas de 2019

Lo básico: Estilo cascada y Herencia

agosto 07, 2019

Cascada La apariencia final de una pagina web es el resultado de diferentes reglas de estilo. Las principales fuentes de informacion de estilo que forman una cascada son: La hoja de estilo creada por el autor de la página Los estilos predeterminados del navegador Los estilos especificados por el usuario Herencia Esto hace referencia a la forma en que fluyen las propiedades a través de la página. Un elemento hijo generalmente tomara las caracteristicas del elemento padre, a menos que se defina lo contrario. Ya que la etiqueta <p>(Elemento secundario) esta dentro de la etiqueta <body>(Elemento primario) tomara cualquier valor que se le asigne al elemento primario dando como resultado esto:

Lo básico: Comentarios en CSS

agosto 07, 2019

Recordemos que los comentarios son útiles para cuando queremos explicar o entender mejor nuestro código y estos son ignorados por el navegador

Conceptos básicos de HTML: Enlaces

agosto 07, 2019

La etiqueta <a> Los enlaces en las paginas web son muy comunes ya sea en textos o imágenes para ser dirigidos a otro sitio web o un archivo. Esto se logra con la etiqueta <a> y agregandole el atributo href el cual nos indica hacia donde nos dirige el enlace. Para hacer que una imagen funcione como un enlace simplemente ponemos la etiqueta <img> entre las etiquetas <a>: Cuando damos clic a los enlaces que hemos creado estos nos redirigen en la misma pagina lo que para muchos es muy molesto, pero si a la etiqueta <a> le agregamos el atributo target y le damos un valor _blank el enlace nos redirigirá en una nueva pestaña

Conceptos básicos de HTML: Imágenes

julio 31, 2019

La etiqueta <img> Esta etiqueta se usa cuando queremos insertar una imagen y esta solo contiene atributos, tampoco hay una etiqueta de apertura y otra de cierre y se ve así: El atributo src se utiliza para encontrar la URL (dirección) de la imagen. Ubicación de la imagen La imagen que queramos insertar en nuestra pagina debe de estar en la misma ubicación que nuestro archivo HTML, especificandolo con el atributo src y poniendo el nombre de la imagen entre las casillas junto su extensión. En caso de que la imagen no pueda mostrarse, el atributo alt especifica en palabras el porque no se mostró. Este atributo es importante. Cambio del tamaño de las imagenes. Para cambiar el tamaño de las imagenes se usan los atributos de largo y ancho (height y widht): Borde de la imagen Las etiquetas por defecto no tienen borde, si queremos agregar un borde lo podemos hacer con la etiqueta border :

Conceptos básicos HTML: Atributos

julio 28, 2019

Atributos Los atributos se encargan de darle información a los elementos al mismo tiempo que pueden modificarlos, ya que casi todos los atributos tienen un valor y este valor a su vez modifica el atributo. En este ejemplo podemos observar el atributo align y le damos al valor center para que nos de el siguiente resultado: Los atributos siempre deben de especificarse en la etiqueta de apertura del elemento que queremos modificar. Mediciones de atributos Por ejemplo podemos modificar una linea para que tenga un ancho de 60 pixeles. Esto se hace con el atributo width: Esto de igual manera se puede hacer en porcentaje. Atributo de alineación Estos atributos como su titulo lo dice son aquellos que usamos para alinear nuestro texto de la manera que lo necesitemos. Por ejemplo podemos hacer un texto alineado al centro y una linea alineada hacia la izquierda, así: Dando esto como resultado:

Conceptos básicos de HTML: Elementos

julio 28, 2019

Elementos HTML Podemos decir en pocas palabras que los elementos HTML son todas sus etiquetas. Hay algunos elementos pequeños que no tienen etiquetas de apertura y cierre, son elementos individuales como es el caso de la etiqueta <br>. Ejemplo:

JavaScript externo

julio 28, 2019

Los scripts también se pueden usar en archivos externos al igual que CSS como lo vimos en ese curso. Esto es muy útil cuando vamos a usar el mismo código en diferentes paginas web y se guarda con la extensión .js Para usar el JavaScript externo solo tenemos que colocar su nombre dentro de la etiqueta <script> del documento HTML agregándole al atributo src de esta manera: Y en el archivo JavaScript de esta manera: El resultado será el mismo que cuando incluimos el JavaScript al archivo HTML. También podemos crear una referencia ya sea en <head> o en <body> donde usted lo prefiera. Las ventajas de hacer esto es que podemos separar el HTML del código, hacer que las paginas sean más rápidas y archivos sean legibles.

Reglas y selectores de CSS

julio 27, 2019

Sintaxis CSS CSS se compone de algunas reglas de estilo que el navegador entiende y luego aplica y esto se basa es tres simples partes. Por ejemplo si queremos definir el color de un titulo lo que debemos tener en cuenta es lo siguiente: h1 {color: purple} Al elemento h1 se le denomina selector ya que seleccionamos que formato vamos a usar, al elemento color se le denomina propiedad ya que es lo que queremos que se le aplique al formato y al elemento purple se le denomina valor ya que es la manera en que la propiedad se va a aplicar. Selectores de tipo Los selectores de tipo son los más comunes y faciles de usar ya que este apunta a todos los tipos de elementos de la pagina. Por ejemplo en el siguiente codigo usamos el selector de tipo para todos los parrafos: Selectores de id y clase Estos selectores permiten aplicar un estilo a un elemento HTML que tenga un atributo id, independientemente de donde se encuentre ubicado. Por ejemplo: EN

Visión General JavaScript

julio 27, 2019

La etiqueta <script> Esta etiqueta puede tomar dos atributos, lenguaje y tipo, que especifican la secuencia de comandos. El atributo lenguaje ya no esta en uso, por lo tanto no lo debemos de usar pero queria compartirles por si alguna vez ven un archivo HTML antiguo. Ahora en modo de ejemplo vamos a hacer un cuadro de alerta en nustra pagina web de esta manera: Y este es el resultado del navegador, las cosas se están poniendo interesantes y se pondrán aún mejor.

Introducción a JavaScript

julio 27, 2019

Nuestro primer JavaScript Vamos entonces a empezar a agregar nustro JavaScript a la pagina web. Tengamos en cuenta que JavaScript vive dentro de el archivo HTML asi que los scripts estaran encerrados por las etiquetas <script></script>. El <script> puede ponerse entre las etiquetas <head> y <body>, pero debemos tener en cuenta que si lo ponemos en head se ejecutara primero que el cuerpo de nuestra pagina que es a la que le daremos lo interactivo. Ahora vamos a usar esto para imprimir un mensaje en la web: La función document.write() escribe una cadena de caracteres para luego imprimirla así: Formato de texto Podemos usar las etiquetas HTML en los scripts para darle los formatos que ya hemos visto antes, así:

Lo básico: En línea, integrado, CSS externo

julio 27, 2019

CSS en línea Usar un estilo de linea es una manera de insertar una hoja de estilo, en este caso de CSS en linea solo se le aplica a un elemento o etiqueta que se quiera estilizar. En este ejemplo vemos como usando CSS podemos darle al párrafo un fondo negro y letra color azul. CSS integrado/interno Para aplicar este método se define la etiqueta <style> dentro de un encabezado (<head>). Al usar este método el estilo ya no se le da solo a una linea sino a todos los elementos que tienen el estilo aplicado en la etiqueta <style>. Y este es el resultado, de verdad que es de gran utilidad esto cuando la página esta muy grande. CSS externo Este metodo se utiliza teniendo un archivo guardado con la extensión .css donde estaran todos los valores que le queramos dar a la estructura de un documento HTML. Ejemplo Con este archivo aparte iremos al archivo HTML y luego llamaremos con la etiqueta <link> a este archivo para que

Conceptos básicos de HTML: Encabezados, líneas, comentarios

julio 27, 2019

Encabezados HTML Para los encabezados en HTML tenemos seis etiquetas que van desde mayor a menor según su importancia: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Este es el resultado en el navegador: No se recomienda usar encabezados para hacer la letra grande y en negrita ya que los motores de busqueda los usan para indexar la pagina. Si quieres agregar propiedades a tu texto puedes ver la entrada donde explico cuales son aquí . Lineas horizontales Para hacer una linea se usa la etiqueta <hr>, esto es HTML significa una roptura temática. Así se ve en el navegador: Comentarios Los comentarios no afectan en absoluto el archivo HTML y de igualmanera los navegadores tampoco lo muestran. Se usan para hacer de tu archivo un codigo legible dandole recordatorios, indicaciones y lo que quieras ponerle. La etiqueta para comentarios es esta: <!- Aquí va el comentario -> (el signo de exclamación solo esta e