Introducción a HTML

Saludos y bienvenidos a otro pequeño tutorial

En este vamos a ver un poco sobre HTML para los que no conocen nada acerca de este lenguaje

¿Qué es HTML?

HTML ó Hyper Text Markup Language es un lenguaje de marcado que se utiliza para la elaboración de páginas web.

Es usado para definir la estructura del sitio por medio de “tags” o “etiquetas” predeterminadas, que le dan al sitio un orden y esqueleto.

Las etiquetas van marcadas con los signos “<” y “>” en las que van a ir incluidas las instrucciones, estás a su vez pueden contener scripts de javascript o estilos de CSS.

HTML tambien es usado para referirse al contenido del tipo MIME, ya sea de forma ascendida a XML (XHTML) o su forma descendida SIGML.

Podría explicarles más de la historia del HTML pero la vdd lo veo totalmente innecesario así que vayamos directamente a lo que nos interesa…. Cómo usar HTML.

Atributos

En HTML como en muchos lenguajes de programación, los atributos son los valores que contendrán las etiquetas de nuestro documento, generalmente van antecedidas de un “=” inmediatamente después de la tag y el valor irá entre comillas.

ej:

Usando la etiqueta <img>

En este ejemplo se ve como se abre la etiqueta con un “<” seguida por el atributo “img”, el “src” es la fuente de donde va a llamar la imágen y como dijimos va seguida de un “=”, posteriormente el valor del atributo va entre comillas “images/prueba.jpg” lo que indica que la imagen “prueba.jpg” se encuentra dentro del directorio o carpeta “images”

Códigos HTML Básicos

vamos a ver unos cuantos códigos que serán muy utilizados ahora que empiecen a diseñar páginas web:

<script> Esta etiqueta nos va a servir para introducir el código de algún script en una página web, como un javascript por ejemplo:

Aquí estamos mandando a llamar un script externo, recuerda que el atributo “src” nos indica la ruta dónde se encuentra el archivo que estamos buscando

<head> Esta etiqueta define la cabecera de nuestro documento, en la cuál ira la información propia del sitio y de nosotros tales como el título, las metatags (ya las explicaré mas adelante). Veamos un ejemplo para que quede mas clara la idea.

Como ven aqui las etiquetas “<meta />”, “<title>”, <link /> y <script> estan contenidas dentro de las etiquetas “<head>” y “</head>”

LO QUE VA DENTRO DE ESTAS ETIQUETAS NO APARECE EN EL NAVEGADOR CUANDO LO PUBLICAN

<meta> Aquí van los metadatos cómo la propiedad, Nombre del sitio, palabras claves, descripción, en fin todos los datos que se refieren a nuestro sitio. No pongo imagen porque en el ejemplo anterior ya viene ésta etiqueta

<link> Nos sirve para mandar a llamar a las hojas de estilo o a los iconos que se mostraran en el navegador

<title> Aquí va el título de la página que se mostrará en el navegador, aquí si les pondre un ejemplo, veamos:

Aquí puse el título en la tag “<title>” y en mi explorador se ve así:

Con esto creo que ya quedo más claro cómo usar esta etiqueta

<style> Con ésta etiqueta podemos introducir código CSS directamente en nuestra documento HTML que SOLAMENTE afectará al documento actual, a diferencia de si fuese un archivo .css externo

Aquí le estamos dando estilo al cuerpo de la página, para saber más sobre CSS visita mi otro tutorial dando click aquí

<body> Una de las etiquetas más importantes, dentro de la etiqueta “<body>” es dónde irá contenido TODO lo que se va a mostrar en la página

<h1> hasta <h6> Estas etiquetas son las que van a indicar si un texto es un título, subtítulo, etc etc veamos un ejemplo:

Así se ve el código y así se ve el resultado:

<table> Con esta etiqueta podremos incluir tablas en nuestro documento y además van acompañadas de otras etiquetas que ayudan a la tabla que son <td>Determina la columna de la tabla y <tr> que determina la fila de la tabla, Veamos:

El código y le añadimos un borde para que se vea en el explorador

Esta etiqueta se utilizaba para hacer páginas de internet basadas en HTML, miren este ejemplo:

Así se codifica la estructura de la página:

Y así se veía:

<a> Esta etiqueta sirve para los hipervínculos, comunmente conocidos como Links, estos nos sirven para poder enlazar o linkear una palabra o imagen a algún sitio externo o interno de nuestra página web

El Código con la etiqueta “<a>” y para indicar la fuente utilizaremos el atributo “href”, observen que el texto esta incluido entre las etiquetas “<a>” y “</a>”

<div> División de página, utilizada principalmente con CSS para sustituir a la etiqueta “<table>”

<ul> <ol> <li> Etiquetas que se usan para las listas, veamos los ejemplos:

<strong> Etiqueta para poner texto en negrita

<em> Etiqueta para poner un texto en itálica

<del> Etiqueta para tachar un texto

<u> Esta etiqueta sirve para subrayar un texto

Pues este capítulo llega hasta aquí, con esto ya deben tener conocimientos básicos para entender los siguientes tutoriales tanto de HTML cómo de CSS

Espero que les sirva y recuerden comentar los tutoriales =D

Introducción al CSS

Saludos y espero estén muy bien todos

El tema que abordaremos el día de hoy es CSS espero les sea de utilidad

Antes de continuar, es importante que ya tengan un poco de conocimientos sobre html y xhtml.

¿Qué es CSS?

CSS significa Cascade Style Sheet o Hojas de Estilo de Cascada.

Estás definen la apariencia gráfica de los elementos HTML

Los CSS aparecen con HTML 4.0 para así ayudar a resolver problemas en cuanto al diseño

Los CSS pueden estar incluidos dentro del mismo documento HTML o de forma externa, lo cuál ahorra muchísimo trabajo, aunque esto ya lo veremos más adelante.

¿Cómo es que se crea CSS?

HTML es un lenguaje que no pretende dar formato a un documento, solamente se limita a decir qué es un objeto, ejemplo:

<h1>ESTO ES UN ENCABEZADO</h1>

<p>ESTO ES UN PARRAFO</p>

ahora, con la aparición de las etiquetas <font> y sus atributos de color y tamaño en HTML 3.2, el diseño web se volvió muy complicado pues había sitios con una grandisima cantidad de información y que requerían tener distintos tamaños de letra, colores, etc.

Es por esta razón que el Consorcio de World Wide Web (W3C) Crea el CSS.

A partir de HTML 4.0 todo el formato de un documento se puede quitar del HTML y ser guardado aparte en un documento CSS.

En la actualidad TODOS los exploradores soportan CSS hasta su versión 2.

Muy bien, ahora hablaremos sobre su forma de uso y sintaxis

Como ya les mencionaba los CSS pueden ir dentro de su documento html mediante la etiqueta

<style> </style>

o puede ser guardado externamente y mandarlo a llamar mediante la etiqueta

<link rel=”stylesheet” type=”text/css” href=”tu_estilo.css”>

Justo entre las etiquetas <head> y </head>

Aqui les pondré un par de ejemplos para que se entienda mejor.

Style dentro del documento HTML

Stylesheet independiente y mandada a llamar desde la cabecera (<head>)

Ahora lo que sigue es explicarles la sintaxis del CSS

Para ello veamos el siguiente ejemplo:

Nuestro HTML

Nuestro CSS

Sintaxis

Resultado

Lo ideal aquí es que vayan jugando con los valores y atributos para que vean como van cambiando cada uno.

La etiqueta <div>

Pensemos en la etiqueta div como en un cuadro transparente en el cual  esta contenido nuestro documento, en CSS nos será de gran ayuda ya que gracias a esta etiqueta ya no tendremos que hacer el acomodo de información por medio de TABLAS, si no que ahora podremos hacerlo mediantes <div> y con las propiedades del CSS, que ya veremos mas adelante.

CSS Id y Class

Bueno ahora que ya vimos lo básico sigamos a ver que son las id y las class en CSS

El selector id (#)

El selector id en css nos va a ayudar a cambiar el estilo de un único elemento dentro de nuestro css, y se define por medio del símbolo “#”

ejemplo:

EL CSS

EL HTML

EL RESULTADO

El selector class (.)

Bien, ya vimos el uso del selector id ahora continuemos al selector class, éste se representa por medio de un “.” antes del selector de etiquetas.

Nos sirve para dar formato a múltiples número de elementos, lo que nos permite darle un mismo estilo a varios elementos HTML de nuestro documento

Vayamos al ejemplo:

EL CSS

EL HTML

EL RESULTADO

Bueno hasta aquí llega el capítulo de Introducción al CSS, en los siguientes tutoriales ya abordaremos más a fondo como poner imágenes, plugins, posicionar los divs y más para que puedan desarrollar su propio sitio basandose solamente en CSS.

Que tengan buen día y recuerden comentar