Mostrando entradas con la etiqueta aprender xhtml. Mostrar todas las entradas
Mostrando entradas con la etiqueta aprender xhtml. Mostrar todas las entradas

viernes, 9 de febrero de 2018

XHTML de cero. Unidad 4 - Estructura de una página HTML

Tutorial XHTML

html 5 logo
Vamos a ver en esta cuarta unidad la estructura básica de una página HTML.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
</head>

<body>
</body>
</html>

Veamos para que sirve cada una de estas etiquetas básicas:


<!doctype html> Se utiliza para decirle al navegador en que versión de HTML está diseñada la página web.

<html> Es la raíz de un documento HTML. A partir de esta etiqueta se escriben todas las demás.

<head> En esta etiqueta se anidan etiquetas con información que no se muestra directamente en la página. Aquí podemos poner scripts, estilos, etiquetas meta, el título de la página, el idioma, el autor y muchas cosas más que iremos viendo.

<meta charset="utf-8"> Esta etiqueta muestra al navegador la codificación de caracteres utilizada en la página, antes de empezar a procesar nada.
Hay que destacar que esta etiqueta no es obligatoria, pero es imprescindible para evitar una visualización incorrecta de la página, como por ejemplo los acentos.


<title> Este es el título de la página, aparece en la parte superior del navegador, en la barra de título.


Title en una pestaña
Title en una pestaña

<body> Es el cuerpo de la página, aquí aparece todo lo que puedes ver en la página.

Con estas simples etiquetas, ya sabes todo lo necesario para empezar a crear una sencilla página web.
En la siguiente unidad vas a aprender el uso de bastantes etiquetas, con lo que ya tendrás muchos más recursos para poder ser un buen diseñador web.


miércoles, 7 de febrero de 2018

XHTML de cero. Unidad 3 - Etiquetas anidadas

Tutorial XHTML

HTML 5

Unidad 3 - Etiquetas anidadas

Las etiquetas se pueden anidar unas dentro de otras, un buen ejemplo que veréis a diario cuando estéis escribiendo código, es la etiqueta "div", dicha etiqueta sirve para contener otras dentro. Veamos un ejemplo:




<head>
<meta charset="utf-8">
<title>Ejemplo de etiquetas anidadas</title>
</head>
<body>
<div style="text-align: center;">
<p>Texto centrado</p>
</div>
<div style="
text-align: left;">
<p>Texto alineado a la izquierda</p>
</div>
<div 
style="text-align: right;">
<p>Texto alineado a la derecha</p>
</div>
</body>



Cómo puedes ver, tenemos para empezar, las etiquetas "meta" y "title" anidadas dentro de "head". Después tenemos los "divs" anidados dentro del "body" y a su vez, tenemos párrafos anidados dentro de los "divs".





Para terminar esta tercera unidad, veamos el correcto orden de apertura y cierre de las etiquetas al anidarlas.

<p>Aquí tenemos un texto normal <span style="color: red;"> y aquí se vuelve rojo.</span>Aquí vuelve a ser normal.</p>

Si cargamos esto en el navegador, aparecerá de esta forma:

Aquí tenemos un texto normal y aquí se vuelve rojo.Aquí vuelve a ser normal.

Si en lugar del anterior código, lo hicieramos así, por ejemplo, estaría mal:

<p>Aquí tenemos un texto normal <span style="color: red;"> y aquí se vuelve rojo.Aquí vuelve a ser normal.</p></span>



Este código, en el navegador se vería así:
Aquí tenemos un texto normal y aquí se vuelve rojo.Aquí vuelve a ser normal.

Aún escribiendo el código mal, el span funciona, pero no estaríamos cumpliendo los estándares del HTML.
Es importante que sepas ya desde el principio, que etiqueta que se abre, si anida otras dentro, se cierra la última.
En el ejemplo, la etiqueta "p" anida la etiqueta "span", por lo que se cierra por último la etiqueta "p".

Cualquier duda que tengas hasta ahora, es importante que me la pongas en los comentarios, te ayudaré a resolverla.

XHTML de cero. Unidad 2 - Etiquetas HTML - Sintaxis

html 5 logoTutorial XHTML

Unidad 2 - Etiquetas HTML - Sintaxis


En este curso estamos hablando de HTML 5, el cuál ya cuenta con más de 100 elementos etiquetas.

En esta unidad, te explico los tipos de etiquetas HTML que existen.

2.1- Tipos de etiquetas HTML

Tenemos dos tipos de etiquetas HTML, están las que cuentan con apertura y cierre y las etiquetas de solo apertura. Veamos un ejemplo de cada tipo.



2.1.1- Etiquetas de apertura y de cierre

<p>Esto es un párrafo.</p>

Cómo puedes ver, la etiqueta <p> (apertura) necesita un cierre </p>.

2.1.2 - Etiquetas de solo apertura


<img src="img/nombre-foto.jpg">
"img" es un buen ejemplo de este tipo de etiqueta, ya que no tiene cierre.



sábado, 6 de enero de 2018

XHTML de cero. Unidad 1 - Introducción

Tutorial XHTML

Unidad 1- Introducción a XHTML

Web XHTML
HTML es un lenguaje de marcas de hipertexto, diseñado para la elaboración de páginas web.


HTML es la base de toda página web, a partir del código HTML, podemos construir páginas más complejas con diferentes lenguajes de programación web.


Si estás pensando en crear una página web, es imprescindible que aprendas HTML antes de cualquier otro lenguaje de programación.


HTML son las siglas para HyperText Markup Language.
El estándar HTML está a cargo de la W3C (World Wide Web Consortium), de ahí el www.



1.1-Diferencia entre XHTML y HTML

Si has estado buscando cual de los dos estudiar, puede ser que no sepas muy bien la diferencia entre estos dos.
XHTML 1.0 incluye aproximadamente un 95% del estándar HTML 4.01, el resto son mejoras.
Por lo que aún puedes usar HTML, pero es recomendable aprender XHTML.
XHTML además de tener las funcionalidades de HTML, incluye el lenguaje de marcas XML, de ahí viene la X de su nombre.


1.2-Páginas estáticas y dinámicas

el lenguaje HTML solamente permite diseñar páginas estáticas con texto e imágenes, además de poder especificar tipos de fuentes, colores, etc.

1.3-¿Qué quiere decir páginas estáticas?

Las páginas estáticas son aquellas que no tienen interacción con el usuario, es decir, no cambian, no almacenan información.
Para que os quede más claro, una página dinámica podría ser por ejemplo un formulario de registro de usuarios, en la que un usuario introduce sus datos y la página los almacena en una base de datos.


1.4-HTML y CSS

Web CSSCSS es un lenguaje de diseño gráfico, que permite darle un aspecto más atractivo a las páginas web.
CSS se puede implementar en las páginas HTML.
Pero, ¿qué problema tiene?
Imagínate que quieres hacer un sitio web con miles de páginas. A esas páginas les añadirás una cabecera una serie de menús, unos colores característicos, etc.
Pues bien, si implementas este código CSS en cada una de las páginas puede ser que un día quieras cambiar el diseño  de tu web y tendrás que hacerlo en cada una de las páginas.


1.5- ¿Cómo solucionamos el problema?

Implementando hojas CSS en la web, con estas hojas que aprenderemos a usar más adelante, podrás poner todos los diseños de tu web en una sola hoja de estilos CSS.



1.6- Sintaxis HTML

Para finalizar este primer capítulo y que no se alargue demasiado, voy a explicar de qué manera funciona la sintaxis de HTML.
En un documento HTML tenemos dos partes principales:
La cabecera <head> y el cuerpo <body>
Cada una de las etiquetas de HTML se escriben de la siguiente manera:
Etiquetas encerradas entre los símbolos menor que (<) y menor que (>).
Siempre hay una etiqueta que se abre y otra que se cierra.
Empecemos a ver los elementos principales de esta simple página:
Todos los documentos empiezan con la etiqueta <html> y se cierran con la etiqueta de cierre correspondiente, estas encierran dentro el resto de elementos HTML.
Después tenemos la etiqueta <head>. La cabecera incluye los elementos que no se ven en la página. Esta se utiliza para poner cosas como el título, scripts, etiquetas meta, etc.
Veremos a lo largo del curso su importancia, de momento lo dejo a modo de introducción.


A continuación tenemos la etiqueta <body>. El cuerpo de la página incluye todos los elementos visibles de la página.