Vivir y Aprender Web » XHTML https://viviryaprenderweb.com Desarrollo web, recursos y tutoriales sobre xhtml, css, javascript, jquery, php, ruby on rails, seo y diseño web Wed, 20 Apr 2016 06:22:22 +0000 es-ES hourly 1 https://wordpress.org/?v=4.1.41 Introducción a CSS – Hoja de estilo en cascada https://viviryaprenderweb.com/introduccion-a-css-hoja-de-estilo-en-cascada/ https://viviryaprenderweb.com/introduccion-a-css-hoja-de-estilo-en-cascada/#comments Sat, 04 Apr 2015 21:19:04 +0000 http://viviryaprenderweb.com/?p=493 Logo de CSSLas hojas de estilo en cascada por sus siglas en inglés CSS (cascading style sheets) es el lenguaje encargado de darle una apariencia a nuestras paginas web (HTML o XHTML), una vez definido nuestro HTML de nuestra pagina web podemos comenzar a trabajar en nuestro CSS para darle una presentación (color, tamaño y estructura) a […]

La entrada Introducción a CSS – Hoja de estilo en cascada aparece primero en Vivir y Aprender Web.

]]>

Las hojas de estilo en cascada por sus siglas en inglés CSS (cascading style sheets) es el lenguaje encargado de darle una apariencia a nuestras paginas web (HTML o XHTML), una vez definido nuestro HTML de nuestra pagina web podemos comenzar a trabajar en nuestro CSS para darle una presentación (color, tamaño y estructura) a nuestra pagina web.

Es importante conocer que la entidad encargada de definir las reglas o standares del lenguaje CSS es la W3C (World Wide Web Consortium), estos standares a la vez tienen que ser respetados por todos los diferentes navegadores web, aunque cabe mencionar que algunos navegadores web tal como el Internet Explorer no siguen al 100% estos standares, generando algunos inconvenientes a los desarrolladores web (de esto hablaremos en otro post mas adelante ;) ).

Ahora teniendo en cuenta esta información pasamos a lo siguiente:

Cuál es la sintaxis este lenguaje?

La sintaxis de este lenguaje es bastante sencilla, se compone un selector(es), propiedad(es) y valor(es), expresado nuestro código CSS seria:

1
2
3

selector {
  propiedad: valor;
}

Ahora entramos un poco mas en detalle:

Selector: sera el que haga referencia a la etiqueta HTML a la que le queremos aplicar un estilo (o presentación).

Propiedades: estas propiedades son una seria de palabras en inglés tales como: color, width, height, font, etc. Que como vemos trabajan lo que son colores, anchos y altos del elemento que hemos seleccionado (selector).

Valores: los valores de las propiedades son diferentes según sea su propiedad por ejemplo: color: #ffffff (blanco) el valor es en hexadecimal, otro puede ser width: 10px y así cada propiedad tiene su valor.

Un ejemplo real seria:

1
2
3

p{
color: #ff0000;
}

Las propiedades de CSS que pueden aplicarse a una etiqueta o selector son muchas, pero para ayudarte un poco a conocerlas puedes revisar este Cheat CSS con varias propiedades que te ayudaran para comenzar:

CSS Cheat Sheet

Cómo lo incluimos en nuestras paginas web HTML?

Para incluir nuestro CSS a nuestras paginas web lo podemos hacerlo de tres formas:

1ra Forma

Definiendo una hoja de estilo interna (dentro de nuestro HTML), ejemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13

<html>
<head>  
  <title>Mi primera pagina</title>
  <style>
    p{
  color: #f00;
}
  </style>
</head>
  <body>
    <p>hola mundo!</p>
  </body>
</html>

Como podemos ver para esta forma es necesario definir dentro de nuestras etiquetas «head», la etiqueta «style» y dentro colocar nuestro código CSS.

2da Forma

Definiendo nuestro estilo dentro de una etiqueta HTML (esta forma se conoce como inline)

1
2
3
4
5
6
7
8

<html>
<head>  
  <title>Mi primera pagina</title>
</head>
  <body>
    <p style="color: #ff0000;">hola mundo!</p>
  </body>
</html>

De esta forma vemos que nuestro código CSS esta dentro de la etiqueta «p».

3ra Forma

La tercera forma es manejando nuestro código CSS en un archivo externo con extensión «css», por ejemplo:

Vamos a crear el archivo style.css con las siguientes lineas:

1
2
3

p{
  color: #ff0000;
}

Luego vamos a tener nuestro archivo HTML con el siguiente nombre: mi-primera-pagina.html y tendrá el siguiente código:

1
2
3
4
5
6
7
8
9

<html>
<head>  
  <title>Mi primera pagina</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>
  <body>
    <p>hola mundo!</p>
  </body>
</html>

Usando la etiqueta «link» y el atributo href=»style.css» incluimos nuestro archivo style.css a nuestra pagina HTML.

El resultado de nuestro ejemplo puede verse a continuación:

See the Pen Simple html by Ramón (@viviryaprenderweb) on CodePen.

Bueno hasta aquí con esta pequeña introducción a CSS, espero que haya sido de ayuda y posteriormente estaremos publicando otros post para ampliar tu conocimiento en CSS.

Saludos y hasta pronto ;)

La entrada Introducción a CSS – Hoja de estilo en cascada aparece primero en Vivir y Aprender Web.

]]> https://viviryaprenderweb.com/introduccion-a-css-hoja-de-estilo-en-cascada/feed/ 0 Estructura general de una pagina web XHTML https://viviryaprenderweb.com/estructura-general-de-una-pagina-web-xhtml/ https://viviryaprenderweb.com/estructura-general-de-una-pagina-web-xhtml/#comments Sun, 18 Nov 2012 00:10:43 +0000 http://viviryaprenderweb.com/?p=267 La estructura general de una pagina web XHTML prácticamente siempre poseerá las etiquetas: DOCTYPE, head, title, body. A continuación veremos un ejemplo de una pagina web XHTML muy básica para comprender un poco mejor: 1 2 3 4 5 6 7 8 9 10 11 12 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <head> <title>Mi […]

La entrada Estructura general de una pagina web XHTML aparece primero en Vivir y Aprender Web.

]]> La estructura general de una pagina web XHTML prácticamente siempre poseerá las etiquetas: DOCTYPE, head, title, body. A continuación veremos un ejemplo de una pagina web XHTML muy básica para comprender un poco mejor:

1
2
3
4
5
6
7
8
9
10
11
12

<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.1//EN”
“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
<head>
  <title>Mi primera pagina web</title> 
</head>
<body>
 
  <p>Hola mundo!!!</p>
 
</body>
</html>

Si copias estas lineas en un editor de texto plano (notepad en windows o gedit en linux, por ejemplo) y posteriormente lo guardas como un archivo .html (mi-primera-pagina.html) y después lo abrimos con nuestro navegador web veras una pagina web, muy sencilla pero esencial para comprender como trabajan las paginas web que vemos a diario.

A continuación te mostraremos una imagen que muestra nuestro código XHTML y el resultado en el navegador web:
La estructura general de una pagina web XHTML

Ahora nos centraremos en explicar cada una de las partes o secciones que nos ayudaran a conocer esta estructura general que componen nuestras paginas XHTML.

Etiqueta head:

1
2
3
4
5
6

<head>
  <title>Mi primera pagina web</title>
  <!-- referencias a: hojas de Estilos (.css) y archivos JavaScript (.js) -->
  <link rel="stylesheet" type="text/css" href="style.css" />
  <script type="text/javascript" src="mis-funciones.js"></script>
</head>

Entre estas etiquetas veremos lo que es el titulo de nuestra pagina web el cual aparecerá en la barra del navegador, el cual indicamos a su ves entre las etiquetas title, dentro de esta etiqueta también encontraremos referencias a: Hojas de estilo CSS, archivos Javascript y tambien segmentos Hojas de estilo CSS y de códigos Javascript en algunos casos asi como estilos en particular y codigos de google analitic por ejemplo.

Etiqueta title
Es la encargada de mostrar el titulo en la barra del navegador y también puede servir de referencia a los buscadores web como: google o yahoo.

Nuestra siguiente etiqueta es body

1
2
3

<body>
  <p>Hola mundo!!!</p>
</body>

La palabra «body» en ingles significa «cuerpo» y literalmente en este contexto se convierte en el cuerpo de nuestra pagina web, esta etiqueta se convierte en la contenedora en si de todo lo que veremos en nuestro navegador web, de momento nuestra pagina web que hemos creado con el código de ejemplo se verá de la siguiente manera:

mi primera pagina web - vista en el navegador -La estructura general de una pagina web XHTML

Etiqueta p
Nuestra etiqueta «p» indica al navegador que lo que se encuentre entre:

1

<p> </p>

será un «parrafo»

Bueno esperamos este post haya sido de ayuda para tu aprendizaje y posteriormente estaremos publicando un poco mas sobre el contenido entre nuestra etiqueta body para que puedas empezar a desarrollar tus propias paginas web con conocimiento sólido.

Puedes descargar los archivos del ejemplo en este enlace: estructura-basica-pagina-web-xhtml

Haciendo un poco de remembranza:
En nuestro pasado post explicamos un poco sobre lo que cambia en lo que trata una pagina XHTML de una HTML de la vieja escuela, puedes revisarlo por si no lo has leido ;)

La entrada Estructura general de una pagina web XHTML aparece primero en Vivir y Aprender Web.

]]> https://viviryaprenderweb.com/estructura-general-de-una-pagina-web-xhtml/feed/ 0 ¿Qué se esta ocupando en la actuliadad HTML o XHTML?, Qué es lo que cambia ? https://viviryaprenderweb.com/actuliadad-html-o-xhtml-que-es-lo-que-cambia/ https://viviryaprenderweb.com/actuliadad-html-o-xhtml-que-es-lo-que-cambia/#comments Thu, 11 Oct 2012 00:32:09 +0000 http://viviryaprenderweb.com/?p=28 En realidad lo que ahora se esta ocupando es XHTML el cual esta basado en XML esto viene a fortalecer su estructura y con ello trae algunos cambios en nuestro antiguo HTML. Algunos pequeños cambios a tomar en cuenta en nuestros documentos XHMTL son los siguientes: 1) Todas nuestras paginas ahora comenzaran con la etiqueta […]

La entrada ¿Qué se esta ocupando en la actuliadad HTML o XHTML?, Qué es lo que cambia ? aparece primero en Vivir y Aprender Web.

]]> En realidad lo que ahora se esta ocupando es XHTML el cual esta basado en XML esto viene a fortalecer su estructura y con ello trae algunos cambios en nuestro antiguo HTML.
Algunos pequeños cambios a tomar en cuenta en nuestros documentos XHMTL son los siguientes:

1) Todas nuestras paginas ahora comenzaran con la etiqueta DOCTYPE, por ejemplo:

<!DOCTYPE html
PUBLIC «-//W3C//DTD XHTML 1.1//EN»
«http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd»>

Lo cual le indica a nuestro navegador que sera un XHMTL y no un HTML.
2) Otro cambio es que ahora tenemos que escribir todas nuestras etiquetas en minúsculas ya que de estar en mayúsculas el documento no se validará como XHTML, ejemplo:

La manera HTML:
<TITLE> Noticias de El Salvador </TITLE>

La manera XHTML:
<title> Noticias de El Salvador </title>

3) Los valores de los atributos tienen que ponerse entre comillas dobles (“”), por ejemplo:
width= 50
La manera correcta: width= “50”

4) Todas las etiquetas deben de cerrarse  (<body><body/><p></p>), en el caso de las etiquetas img, br, se hace lo siguiente:
<img />, <br />

Tenemos que notar que dejamos un espacio que precede ha la barra para evitar que antiguos navegadores se confundan con nuestras etiquetas ya que estos aun no contemplaban el estándar XHTML.

Cuales son los beneficios de XHTML
Primeramente avanzamos en tecnología y gracias a que podemos pasar fácilmente nuestros documentos HTML ha XHTML (teniendo en cuenta los cambios mencionados anteriormente) no nos complicamos en lo absoluto para acoplarnos a este nuevo estándar.

Etiquetas más claras y lógicas
El HTML tuvo un rápido crecimiento por cual dejo sin interés su marcado (osea sin lógica), el XHTML viene y retoma nuevamente este punto, ayudando a la integridad estructural de nuestros documentos. Por ejemplo:
Para un sistema braille sera mas fácil entender la etiqueta <strong> que nuestra vieja etiqueta <b>.

La entrada ¿Qué se esta ocupando en la actuliadad HTML o XHTML?, Qué es lo que cambia ? aparece primero en Vivir y Aprender Web.

]]> https://viviryaprenderweb.com/actuliadad-html-o-xhtml-que-es-lo-que-cambia/feed/ 0