Aquí comparto un interactivo para quienes están aprendiendo los primeros conceptos de HTML
Categoría: HTML+CSS
HTML desde cero – Introducción a CSS: colores, posiciones, tamaños, y más
Hasta ahora hicimos las siguientes cosas:
- Clase 1: párrafos, encabezado, y cuerpo
- Clase 2: negrita, cursiva, enlaces
- Clase 3: imágenes, título de página y títulos de secciones
- Clase 4: Listas numeradas y no numeradas, tablas
Pero en ningún momento definimos el formato de cada objeto: color, tamaño, posición, etc.
En este tutorial de HTML y CSS de W3schools se explican tres maneras de dar formato a una página en HTML: en el encabezado, entre el contenido, y mediante el uso de una hoja de estilo externa. Esta tercera es muy superior a las otras, debido a que permite cambiar de hoja de estilo dando formato a todos los elementos de la página.
¿Y para qué sirve cambiar de hoja de estilo? Por ejemplo, para darle alto contraste si uno es un usuario con problemas de visión. O para tener una hoja de estilo personalizada en el caso de ser una persona daltónica o con algún tipo de ceguera del color.
Mi primer hoja de estilo
Vamos a necesitar un archivo HTML que tenga varios elementos, por ejemplo, este:
<h1>Comienzo de clases</h1>
<h2>Resultados del campeonato de truco</h2> <h3>Intercolegial diciembre 2015</h3>
<ol>
<li>Pérez</li>
<li>Gómez</li>
<li>Fernández</li>
<li>Rodríguez</li>
</ol>
<h2>Campamento febrero 2016</h2> <h3>Lista de elementos a traer</h3>
<ul> <li>Birome</li>
<li>Cuaderno</li>
<li>Hilo de pizza</li>
<li>Instrumento musica (no piano)</li>
</ul> <p>Se ruega a los señores padres enviar a sus hijos aseados y retirarlos al finalizar la jornada en forma puntual.</p> <p>No se aceptan mascotas.</p>
Para tener una página web deberemos agregarle, como siempre, el encabezado que indica el tipo de archivo, la codificación que permite ver los acentos y eñes, y esta vez le vamos a añadir un enlace a la hoja de estilo:
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <link rel="stylesheet" href="miestilo.css"> <title>Escuela</title> </head> <body> .............. </body> </HTML>
El archivo miestilo.css puede contener indicaciones acerca de cómo será cada uno de los elementos (o sólo algunos de ellos), pudiendo obtener resultados tan distintos como estos:
En el primer caso, el encabezado H1 es de color verde (aquí se puede ver una tabla de colores y códigos), el encabezado H2 es de otro tono de verde, con un borde a la izquierda punteado (“dotted”) cuyo ancho es de un caracter (1em) y del mismo color del texto. En el segundo caso, el encabezado H2 se posiciona a la izquierda porque en su hoja de estilo dice que “flote a la izquierda” y que su ancho sea de 10 caracteres (float: left; width: 10em;)
body {background-color: #F5F6CE;}
h1 {color: #0B6121;}
h2 {color: #088A29; border-left: dotted 1em #088A29;}
h3 {color: #04B431; border-left: dotted 1em #04B431;}
p {color:#170B3B; width: 60%; margin-left: 20%; border: 1px dotted #088A29;}
li {list-style-type:square; width: 60%; margin-left: 20%;}
h1 {color: #0B6121;}
h2 {color: #088A29; border-left: dotted 1em #088A29;}
h3 {color: #04B431; border-left: dotted 1em #04B431;}
p {color:#170B3B; width: 60%; margin-left: 20%; border: 1px dotted #088A29;}
li {list-style-type:square; width: 60%; margin-left: 20%;}
body {background-color: #FFF;}
h1 {color: #B45F04; text-align: right; border: 1px solid #61210B; width: 60%; float:left;}
h2 {color: #FF8000; border-right: solid 0.1em #FF8000; width: 10em; float: left; padding-top: 2em; padding-bottom: 1em;}
h3 {padding-top: 1em; padding-bottom: 1em; color: #8A4B08;}
p {color:#000; width: 80%; padding: 0.2em; font-variant:small-caps;}
li {list-style-type:square; width: 60%; margin-left: 20%;}
h1 {color: #B45F04; text-align: right; border: 1px solid #61210B; width: 60%; float:left;}
h2 {color: #FF8000; border-right: solid 0.1em #FF8000; width: 10em; float: left; padding-top: 2em; padding-bottom: 1em;}
h3 {padding-top: 1em; padding-bottom: 1em; color: #8A4B08;}
p {color:#000; width: 80%; padding: 0.2em; font-variant:small-caps;}
li {list-style-type:square; width: 60%; margin-left: 20%;}
A partir de estos primeros experimentos, habrá mucho que investigar sobre el tema. Pero lo importante será tener claro que el formato debe estar separado del contenido.
Tampoco se deben utilizar colores para brindar contenido (algo como “los alumnos que se visualizan en color rojo adeudan papeles en administración”).
Aquí hay un completísimo tutorial de CSS donde se explican las nociones más importantes de este lenguaje.
HTML desde cero – Clase 4
En la clase 1 hicimos una página muy sencilla. En la clase 2 agregamos negrita, cursiva, enlaces. En la tercera clase le agregamos imágenes, título y encabezados.
En esta cuarta clase vamos a utilizar listas numeradas y no numeradas, y un mínimo de tablas.
Listas
- Comienzo de lista numerada: <ol>
- Fin de lista numerada: </ol>
- Comienzo de lista no numerada (viñetas): <ul>
- Fin de lista no numerada: </ul>
- Comienzo ítem de lista: <li>
- Fin de ítem de lista: </li>
Cada vez que necesitamos tener un conjunto de párrafos con viñetas, o con un símbolo al lado, debemos utilizar listas ordenadas (OL, “orderer) o no ordenadas (UL, “unorderer list”).
<h1>Comienzo de clases</h1>
<h2>Resultado del campeonato de truco</h2>
<ol>
<li>Pérez</li>
<li>Gómez</li>
<li>Fernández</li>
<li>Rodríguez</li>
</ol>
<h2>Lista de elementos a traer</h2>
<ul> <li>Birome</li>
<li>Cuaderno</li>
<li>Hilo de pizza</li>
<li>Instrumento musica (no piano)</li>
</ul>
Tablas
- Comienzo de tabla: <table>
- Fin de tabla: </table>
- Comienzo de fila de tabla (row): <tr>
- Fin de fila de tabla: </tr>
- Comienzo de datos de la tabla (data): <td>
- Fin de datos de tabla: </td>
- Comienzo de encabezados de tabla (heading): <th>
- Fin de encabezados de tabla: </th>
Es muy importante saber que se deben usar tablas solamente cuando los datos pueden presentarse claramente como una tabla, es decir tienen más de una columna y más de una fila. Hace unos cuántos años se usaban tablas invisibles para acomodar objetos en la pantalla, pero estas le están indicando a los lectores de pantalla algo que no es, lo cual hace imposible la comprensión para una persona invidente o que utiliza ayudas técnicas.
<h2>Resultado del campeonato de truco</h2>
<table>
<tr>
<th>Apellido</th>
<th>Nombre</th>
<th>Puntaje</th>
</tr>
<tr> <td>Pérez</td>
<td>Juan</td>
<td>300</td> </tr>
<tr> <td>Gómez</td>
<td>Juana</td>
<td>299</td> </tr>
<tr> <td>Rodríguez</td>
<td>Andrés</td>
<td>99</td> </tr>
</table>
HTML desde cero – Clase 3
En la clase 1 hicimos una página muy sencilla. En la clase 2 agregamos negrita, cursiva, enlaces. En la tercera clase le vamos a agregar imágenes, título y encabezados.
Los títulos de las ventanas
- Comienzo de título de ventana: <title>
- Fin de título de ventana: </title>
Vamos a abrir el archivo HTML en el editor de texto (Notepad++, Geany, etc.)
Hasta ahora en la parte del encabezado sólo tenemos la declaración del tipo de caracteres, lo cual es necesario incluir para poder ver los acentos y eñes.
Ahora vamos a agregar algo más en esa sección (dentro del heading)
<!DOCTYPE html>
<head>
<meta charset=”UTF-8″>
<title>El Martín Fierro</title>
</head>
<body>
¿Pero dónde se ve ese título? Cuando abras tu página web, vas a ver el título en la parte de arriba del navegador, y también en la barra de tareas.
Agregamos títulos y subtítulos en la página
- Comienzo de encabezado de primer nivel (títulos principales): <h1>
- Fin de encabezado: </h1>
- Comienzo de encabezado de segundo nivel (subtítulos): <h2>
- Fin de encabezado de segundo nivel: </h2>
Para insertar un título, por supuesto, se puede escribir el título y luego agregarle negrita o cursiva. Sin embargo, esa manera de poner un título no es útil para todos los usuarios. Lo que es correcto semánticamente es indicar que lo que uno está escribiendo es un título.De esa manera quien lo necesite puede comprender la estructura de la página, y también se puede determinar un formato para todos los encabezados de primer nivel (títulos), otro formato para los encabezados de segundo nivel (subtítulos), etc.
<body>
<h1>Rayuela</h1>
<h2>Pero no el libro original</h2>
<h3>Autor: Yo</h3>
<p>Había una vez una vereda, una niña, y una tiza. También había una piedra y otra niña. Todos esos elementos se combinaron de tal forma que en la vereda quedó una rayuela. La lluvia la borró.</p>
</body>
Imágenes
- Inserción de una imagen: <img src=”imagen.png> alt=”Logotipo” />
Para insertar una imagen es necesario que el archivo:
- Tenga uno de estos tres formatos:
- GIF (menos colores, pero con posibilidad de ser animados),
- JPG (todos los colores, sin transparencia ni animación pero mejor compresión que el PNG), o
- PNG (pesa más, pero admite transparencias)
- Esté on line, es decir, tenemos que subir la imagen para poder indicar su ubicación (en el caso de nuestras prácticas con páginas locales, no es necesario; basta con poner el archivo de imagen en la misma carpeta que la página que estamos creando).
- Tenga derechos que te permitan usarla. Nunca hay que usar una imagen que no tiene declarada una licencia que permita su uso.
Imágenes con enlaces
Para poner un enlace en una imagen, basta con poner la imagen en el lugar donde se escribe el contenido del enlace:
<a href=”https://es.wikipedia.org/”><img src=”https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Wikipedia-logo-v2-es.svg/135px-Wikipedia-logo-v2-es.svg.png”/></a>
Se ve de esta manera:
Hay dos recomendaciones muy importantes para mejorar la accesibilidad del sitio web:
- Las imágenes deben tener texto alternativo significativo (si la imagen tiene enlace, el texto alternativo debe ser la indicación del enlace, por ejemplo “Ir al comienzo”)
- Las imágenes tienen que estar optimizadas para poder cargar rápidamente, para no gastar ancho de banda innecesario, máxime teniendo en cuenta que cuando navegamos con nuestros celulares pagamos por cada byte que descargamos.
Te propongo hacer el siguiente ejercicio:
- Armá una pequeña galería de arte o álbum de fotos, poniendo una imagen, luego un enlace a la siguiente, etc.
Más tutoriales de HTML
En el sitio de w3schools hay excelentes tutoriales de HTML y CSS.
HTML desde cero – Clase 3
En la clase 1 hicimos una página muy sencilla. En la clase 2 agregamos negrita, cursiva, enlaces. En la tercera clase le vamos a agregar imágenes, título y encabezados.
Los títulos de las ventanas
- Comienzo de título de ventana: <title>
- Fin de título de ventana: </title>
Vamos a abrir el archivo HTML en el editor de texto (Notepad++, Geany, etc.)
Hasta ahora en la parte del encabezado sólo tenemos la declaración del tipo de caracteres, lo cual es necesario incluir para poder ver los acentos y eñes.
Ahora vamos a agregar algo más en esa sección (dentro del heading)
<!DOCTYPE html>
<head>
<meta charset=”UTF-8″>
<title>El Martín Fierro</title>
</head>
<body>
¿Pero dónde se ve ese título? Cuando abras tu página web, vas a ver el título en la parte de arriba del navegador, y también en la barra de tareas.
Agregamos títulos y subtítulos en la página
- Comienzo de encabezado de primer nivel (títulos principales): <h1>
- Fin de encabezado: </h1>
- Comienzo de encabezado de segundo nivel (subtítulos): <h2>
- Fin de encabezado de segundo nivel: </h2>
Para insertar un título, por supuesto, se puede escribir el título y luego agregarle negrita o cursiva. Sin embargo, esa manera de poner un título no es útil para todos los usuarios. Lo que es correcto semánticamente es indicar que lo que uno está escribiendo es un título. De esa manera quien lo necesite puede comprender la estructura de la página, y también se puede determinar un formato para todos los encabezados de primer nivel (títulos), otro formato para los encabezados de segundo nivel (subtítulos), etc.
<body>
<h1>Rayuela</h1>
<h2>Pero no el libro original</h2>
<h3>Autor: Yo</h3>
<p>Había una vez una vereda, una niña, y una tiza. También había una piedra y otra niña. Todos esos elementos se combinaron de tal forma que en la vereda quedó una rayuela. La lluvia la borró.</p>
</body>
Imágenes
- Inserción de una imagen: <img src=”imagen.png> alt=”Logotipo” />
Para insertar una imagen es necesario que el archivo:
- Tenga uno de estos tres formatos:
- GIF (menos colores, pero con posibilidad de ser animados),
- JPG (todos los colores, sin transparencia ni animación pero mejor compresión que el PNG), o
- PNG (pesa más, pero admite transparencias)
- Esté on line, es decir, tenemos que subir la imagen para poder indicar su ubicación (en el caso de nuestras prácticas con páginas locales, no es necesario; basta con poner el archivo de imagen en la misma carpeta que la página que estamos creando).
- Tenga derechos que te permitan usarla. Nunca hay que usar una imagen que no tiene declarada una licencia que permita su uso.
Imágenes con enlaces
Para poner un enlace en una imagen, basta con poner la imagen en el lugar donde se escribe el contenido del enlace:
<a href=”https://es.wikipedia.org/”><img src=”https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Wikipedia-logo-v2-es.svg/135px-Wikipedia-logo-v2-es.svg.png”/></a>
Se ve de esta manera:
Hay dos recomendaciones muy importantes para mejorar la accesibilidad del sitio web:
- Las imágenes deben tener texto alternativo significativo (si la imagen tiene enlace, el texto alternativo debe ser la indicación del enlace, por ejemplo “Ir al comienzo”)
- Las imágenes tienen que estar optimizadas para poder cargar rápidamente, para no gastar ancho de banda innecesario, máxime teniendo en cuenta que cuando navegamos con nuestros celulares pagamos por cada byte que descargamos.
Te propongo hacer el siguiente ejercicio:
- Armá una pequeña galería de arte o álbum de fotos, poniendo una imagen, luego un enlace a la siguiente, etc.
Más tutoriales de HTML
En el sitio de w3schools hay excelentes tutoriales de HTML y CSS.
HTML desde cero – Clase 2
En la clase 1 hicimos una página muy sencilla.
Hasta ahora sólo tenemos la estructura básica de la página web, y dentro de su contenido depositamos unos párrafos sin ningún estilo.
Ahora vamos a modificar esa misma página web, agregándole negrita, cursiva, enlaces. En la tercera clase le vamos a agregar imágenes, título y encabezados.
Destacamos partes del texto
Comienzo de texto destacado: <strong>
Fin de texto destacado: </strong>
Fin de texto destacado: </strong>
Comienzo de texto en cursiva: <em>
Fin de texto en cursiva: </em>
Fin de texto en cursiva: </em>
Vamos a abrir el archivo HTML en el editor de texto (Notepad++, Geany, etc.)
Y vamos a elegir algunas palabras para destacar en cursiva y en negrita.
Lo que tenemos que hacer es marcar con el comienzo del texto destacado, y marcar con el cierre del texto destacado. Lo mismo para cursiva, pero con em:
Martín Fierro
La vuelta de Martín Fierro
El Gaucho Martín Fierro es un poema narrativo, escrito en verso por José Hernández en 1872, obra literaria considerada ejemplar del género. Debido a que tiene una continuación, La vuelta de Martín Fierro, escrita en 1879, este libro es también conocido como «La ida». Ambos libros han sido considerados como libro nacional de la Argentina, bajo el título genérico de «El Martín Fierro». En «La ida», Martín Fierro es un gaucho trabajador al que la injusticia social lo vuelve gaucho matrero (fuera de la ley).
Agregamos enlaces
Comienzo de enlace: <a href=”https://es.wikipedia.org/”>
Fin de enlace: </a>
Fin de enlace: </a>
La estructura de un enlace es un poco diferente a los tags que venimos viendo, porque -si bien hay apertura y cierre- hay otros dos elementos fundamentales:
El destino del enlace (la dirección, por ejemplo, https://es.wikipedia.org/ )
El texto visible en el enlace, lo que uno quiere que se lea en el link (por ejemplo “Enciclopedia libre”)
<a href=”https://es.wikipedia.org/”>Enciclopedia libre</a>
Se ve de esta manera:
Hay dos recomendaciones muy importantes para mejorar la accesibilidad del sitio web:
- Los enlaces no tienen que tener texto igual entre sí, por ejemplo: haga clic “aquí“, “aquí” y “aquí” para leer más. Una persona que navega escuchando el sitio (como los invidentes o personas con altas dificultades de visión), sólo va a escuchar la palabra “aquí”, lo cual no lo ayuda para saber de qué se trata. La forma correcta es: Acceda a la enciclopedia Wikipedia, al sitio de Martin Fierro, o busque más información en Google.
- Los visitantes de tu página tienen que poder decidir si quieren que un enlace se abra en la misma ventana o en una nueva. Está desaconsejado el uso de enlaces que se abren en una ventana nueva, ya que el usuario pierde el dominio de su navegación. Si aún así lo necesitaras, al código anterior se le agrega lo siguiente: target=“_blank”
<a href=”https://es.wikipedia.org/” target=”_blank”>Enciclopedia libre</a>
Se ve de esta manera:
Te propongo hacer el siguiente ejercicio:
- Tomá un texto que te interese y creá una página web nueva, usando la estructura aprendida como base, y poniendo negrita, cursiva y enlaces en diversos lugares del texto.
Cómo ver el código de una página web
Cuando quieras ver y por qué no copiar código (es frecuente y está permitido, esto es código abierto!) podés hacer clic con el botón derecho sobre una página web y mirar cómo está hecha. Si no tiene programación (javascript, php, etc) o cosas hechas con Flash u otros plugins, vas a poder aprender copiando, pegando y modificando.
Más tutoriales de HTML
En el sitio de w3schools hay excelentes tutoriales de HTML y CSS.
HTML desde cero – Clase 2
En la clase 1 hicimos una página muy sencilla.
Hasta ahora sólo tenemos la estructura básica de la página web, y dentro de su contenido depositamos unos párrafos sin ningún estilo.
Ahora vamos a modificar esa misma página web, agregándole negrita, cursiva, enlaces. En la tercera clase le vamos a agregar imágenes, título y encabezados.
Destacamos partes del texto
- Comienzo de texto destacado: <strong>
- Fin de texto destacado: </strong>
- Comienzo de texto en cursiva: <em>
- Fin de texto en cursiva: </em>
Vamos a abrir el archivo HTML en el editor de texto (Notepad++, Geany, etc.)
Y vamos a elegir algunas palabras para destacar en cursiva y en negrita.
Lo que tenemos que hacer es marcar con el comienzo del texto destacado, y marcar con el cierre del texto destacado. Lo mismo para cursiva, pero con em:
<strong>Martín Fierro</strong>
<em>La vuelta de Martín Fierro</em>
El Gaucho Martín Fierro es un poema narrativo, escrito en verso por José Hernández en 1872, obra literaria considerada ejemplar del género. Debido a que tiene una continuación, La vuelta de Martín Fierro, escrita en 1879, este libro es también conocido como «La ida». Ambos libros han sido considerados como libro nacional de la Argentina, bajo el título genérico de «El Martín Fierro». En «La ida», Martín Fierro es un gaucho trabajador al que la injusticia social lo vuelve gaucho matrero (fuera de la ley).
Agregamos enlaces
- Comienzo de enlace: <a href=”https://es.wikipedia.org/”>
- Fin de enlace: </a>
La estructura de un enlace es un poco diferente a los tags que venimos viendo, porque -si bien hay apertura y cierre- hay otros dos elementos fundamentales:
- El destino del enlace (la dirección, por ejemplo, https://es.wikipedia.org/ )
- El texto visible en el enlace, lo que uno quiere que se lea en el link (por ejemplo “Enciclopedia libre”)
<a href=”https://es.wikipedia.org/”>Enciclopedia libre</a>
Se ve de esta manera:
Hay dos recomendaciones muy importantes para mejorar la accesibilidad del sitio web:
- Los enlaces no tienen que tener texto igual entre sí, por ejemplo: haga clic “aquí“, “aquí” y “aquí” para leer más. Una persona que navega escuchando el sitio (como los invidentes o personas con altas dificultades de visión), sólo va a escuchar la palabra “aquí”, lo cual no lo ayuda para saber de qué se trata. La forma correcta es: Acceda a la enciclopedia Wikipedia, al sitio de Martin Fierro, o busque más información en Google.
- Los visitantes de tu página tienen que poder decidir si quieren que un enlace se abra en la misma ventana o en una nueva. Está desaconsejado el uso de enlaces que se abren en una ventana nueva, ya que el usuario pierde el dominio de su navegación. Si aún así lo necesitaras, al código anterior se le agrega lo siguiente: target=“_blank”
<a href=”https://es.wikipedia.org/” target=“_blank”>Enciclopedia libre</a>
Se ve de esta manera:
Te propongo hacer el siguiente ejercicio:
- Tomá un texto que te interese y creá una página web nueva, usando la estructura aprendida como base, y poniendo negrita, cursiva y enlaces en diversos lugares del texto.
Cómo ver el código de una página web
Cuando quieras ver y por qué no copiar código (es frecuente y está permitido, esto es código abierto!) podés hacer clic con el botón derecho sobre una página web y mirar cómo está hecha. Si no tiene programación (javascript, php, etc) o cosas hechas con Flash u otros plugins, vas a poder aprender copiando, pegando y modificando.
Más tutoriales de HTML
En el sitio de w3schools hay excelentes tutoriales de HTML y CSS.
HTML desde cero – Clase 1
Si tenés ganas de aprender a hacer páginas web desde cero, lo primero que tenés que saber es que casi nadie empieza a programar abriendo un editor de textos vacío y escribiendo todo. Así que no vamos a empezar aprendiendo a escribir código, sino modificando un código ya existente.
¿Dónde se escribe el programa? En cualquier editor de texto plano, por ejemplo Geany (para Linux) o Notepad++ (para Windows).
¿Cómo se ve lo que hace el programa? Abriendo el archivo en un navegador (Mozilla Firefox, Chrome, etc.)
Empezamos.
- Comienzo de párrafo: <p>
- Fin de párrafo: </p>
- Copiá el siguiente código y pegalo en tu editor de texto. En este código lo que hice fue tomar de Wikipedia unos párrafos sobre el Martín Fierro, pegarlos en el editor y utilizar los TAGS (etiquetas) correspondientes a comienzo y final de párrafo.
<p>El Gaucho Martín Fierro es un poema narrativo, escrito en verso por José Hernández en 1872, obra literaria considerada ejemplar del género. Debido a que tiene una continuación, La vuelta de Martín Fierro, escrita en 1879, este libro es también conocido como «La ida». Ambos libros han sido considerados como libro nacional de la Argentina, bajo el título genérico de «El Martín Fierro». En «La ida», Martín Fierro es un gaucho trabajador al que la injusticia social lo vuelve gaucho matrero (fuera de la ley).</p>
<p>Narra el carácter independiente, heroico y sacrificado del gaucho. El poema es, en parte, una protesta en contra de la política del presidente argentino Domingo Faustino Sarmiento de reclutar forzosamente a los gauchos para ir a la frontera contra los indígenas.</p>
<p>Narra el carácter independiente, heroico y sacrificado del gaucho. El poema es, en parte, una protesta en contra de la política del presidente argentino Domingo Faustino Sarmiento de reclutar forzosamente a los gauchos para ir a la frontera contra los indígenas.</p>
- Guardá el archivo con un nombre como “martinfierro.html”
- Abrilo en un navegador (o en todos los navegadores que tengas, de a poco vas a aprender las diferencias entre navegadores)
¿Qué ves en el navegador? Probablemente ves el texto lleno de símbolos raros. ¿Por qué? Porque al comienzo de una página web le tenemos que indicar algunas cosas importantes para que el navegador pueda entender en qué idioma está el texto, entre otras cosas.
La estructura de una página web
La estructura básica de una página web podría resumirse de la siguiente manera:
Comienzo de página
Comienzo de encabezado
---contenido del encabezado---
Fin del encabezado
Comienzo del cuerpo de la página
---contenido del cuerpo de la página---
Fin del cuerpo de la página
Fin de la página
- Una página web en HTML siempre tiene que empezar con la declaración de tipo de documento y la codificación de caracteres. Por eso todos empezamos una página siempre abriendo otra, porque esto no creo que nadie lo escriba “de memoria”:
- Comienzo de página web: <!DOCTYPE html>
- Fin de pagina web: </HTML>
- Comienzo del encabezado: <head>
- Fin del encabezado: </head>
- Comienzo del cuerpo de la página: <body>
- Fin del cuerpo de la página: </body>
Ahora nuevamente, copiá este código y pegalo en tu editor de texto. Guardá el archivo como html y abrilo en un navegador:
<!DOCTYPE html>
<head>
<meta charset=“UTF-8”>
</head>
<body>
<p>El Gaucho Martín Fierro es un poema narrativo, escrito en verso por José Hernández en 1872, obra literaria considerada ejemplar del género. Debido a que tiene una continuación, La vuelta de Martín Fierro, escrita en 1879, este libro es también conocido como «La ida». Ambos libros han sido considerados como libro nacional de la Argentina, bajo el título genérico de «El Martín Fierro». En «La ida», Martín Fierro es un gaucho trabajador al que la injusticia social lo vuelve gaucho matrero (fuera de la ley).</p>
<p>Narra el carácter independiente, heroico y sacrificado del gaucho. El poema es, en parte, una protesta en contra de la política del presidente argentino Domingo Faustino Sarmiento de reclutar forzosamente a los gauchos para ir a la frontera contra los indígenas.</p>
</body>
</html>
<head>
<meta charset=“UTF-8”>
</head>
<body>
<p>El Gaucho Martín Fierro es un poema narrativo, escrito en verso por José Hernández en 1872, obra literaria considerada ejemplar del género. Debido a que tiene una continuación, La vuelta de Martín Fierro, escrita en 1879, este libro es también conocido como «La ida». Ambos libros han sido considerados como libro nacional de la Argentina, bajo el título genérico de «El Martín Fierro». En «La ida», Martín Fierro es un gaucho trabajador al que la injusticia social lo vuelve gaucho matrero (fuera de la ley).</p>
<p>Narra el carácter independiente, heroico y sacrificado del gaucho. El poema es, en parte, una protesta en contra de la política del presidente argentino Domingo Faustino Sarmiento de reclutar forzosamente a los gauchos para ir a la frontera contra los indígenas.</p>
</body>
</html>
Ahora sí, hiciste tu primera página web. Felicitaciones. 🙂
HTML desde cero – Clase 1
Si tenés ganas de aprender a hacer páginas web desde cero, lo primero que tenés que saber es que casi nadie empieza a programar abriendo un editor de textos vacío y escribiendo todo. Así que no vamos a empezar aprendiendo a escribir código, sino modificando un código ya existente.
¿Dónde se escribe el programa? En cualquier editor de texto plano, por ejemplo Geany (para Linux) o Notepad++ (para Windows).
¿Cómo se ve lo que hace el programa? Abriendo el archivo en un navegador (Mozilla Firefox, Chrome, etc.)
Empezamos.
- Comienzo de párrafo: <p>
- Fin de párrafo: </p>
- Copiá el siguiente código y pegalo en tu editor de texto. En este código lo que hice fue tomar de Wikipedia unos párrafos sobre el Martín Fierro, pegarlos en el editor y utilizar los TAGS (etiquetas) correspondientes a comienzo y final de párrafo.
<p>El Gaucho Martín Fierro es un poema narrativo, escrito en verso por José Hernández en 1872, obra literaria considerada ejemplar del género. Debido a que tiene una continuación, La vuelta de Martín Fierro, escrita en 1879, este libro es también conocido como «La ida». Ambos libros han sido considerados como libro nacional de la Argentina, bajo el título genérico de «El Martín Fierro». En «La ida», Martín Fierro es un gaucho trabajador al que la injusticia social lo vuelve gaucho matrero (fuera de la ley).</p>
<p>Narra el carácter independiente, heroico y sacrificado del gaucho. El poema es, en parte, una protesta en contra de la política del presidente argentino Domingo Faustino Sarmiento de reclutar forzosamente a los gauchos para ir a la frontera contra los indígenas.</p>
<p>Narra el carácter independiente, heroico y sacrificado del gaucho. El poema es, en parte, una protesta en contra de la política del presidente argentino Domingo Faustino Sarmiento de reclutar forzosamente a los gauchos para ir a la frontera contra los indígenas.</p>
- Guardá el archivo con un nombre como “martinfierro.html”
- Abrilo en un navegador (o en todos los navegadores que tengas, de a poco vas a aprender las diferencias entre navegadores)
¿Qué ves en el navegador? Probablemente ves el texto lleno de símbolos raros. ¿Por qué? Porque al comienzo de una página web le tenemos que indicar algunas cosas importantes para que el navegador pueda entender en qué idioma está el texto, entre otras cosas.
La estructura de una página web
La estructura básica de una página web podría resumirse de la siguiente manera:
Comienzo de página
Comienzo de encabezado
---contenido del encabezado---
Fin del encabezado
Comienzo del cuerpo de la página
---contenido del cuerpo de la página---
Fin del cuerpo de la página
Fin de la página
- Una página web en HTML siempre tiene que empezar con la declaración de tipo de documento y la codificación de caracteres. Por eso todos empezamos una página siempre abriendo otra, porque esto no creo que nadie lo escriba “de memoria”:
- Comienzo de página web: <!DOCTYPE html>
- Fin de pagina web: </HTML>
- Comienzo del encabezado: <head>
- Fin del encabezado: </head>
- Comienzo del cuerpo de la página: <body>
- Fin del cuerpo de la página: </body>
Ahora nuevamente, copiá este código y pegalo en tu editor de texto. Guardá el archivo como html y abrilo en un navegador:
<!DOCTYPE html>
<head>
<meta charset=“UTF-8”>
</head>
<body>
<p>El Gaucho Martín Fierro es un poema narrativo, escrito en verso por José Hernández en 1872, obra literaria considerada ejemplar del género. Debido a que tiene una continuación, La vuelta de Martín Fierro, escrita en 1879, este libro es también conocido como «La ida». Ambos libros han sido considerados como libro nacional de la Argentina, bajo el título genérico de «El Martín Fierro». En «La ida», Martín Fierro es un gaucho trabajador al que la injusticia social lo vuelve gaucho matrero (fuera de la ley).</p>
<p>Narra el carácter independiente, heroico y sacrificado del gaucho. El poema es, en parte, una protesta en contra de la política del presidente argentino Domingo Faustino Sarmiento de reclutar forzosamente a los gauchos para ir a la frontera contra los indígenas.</p>
</body>
</html>
<head>
<meta charset=“UTF-8”>
</head>
<body>
<p>El Gaucho Martín Fierro es un poema narrativo, escrito en verso por José Hernández en 1872, obra literaria considerada ejemplar del género. Debido a que tiene una continuación, La vuelta de Martín Fierro, escrita en 1879, este libro es también conocido como «La ida». Ambos libros han sido considerados como libro nacional de la Argentina, bajo el título genérico de «El Martín Fierro». En «La ida», Martín Fierro es un gaucho trabajador al que la injusticia social lo vuelve gaucho matrero (fuera de la ley).</p>
<p>Narra el carácter independiente, heroico y sacrificado del gaucho. El poema es, en parte, una protesta en contra de la política del presidente argentino Domingo Faustino Sarmiento de reclutar forzosamente a los gauchos para ir a la frontera contra los indígenas.</p>
</body>
</html>
Ahora sí, hiciste tu primera página web. Felicitaciones. 
Crear un formulario utilizando PHP
Aquí voy a explicar los mínimos conocimientos que se necesitan para crear un formulario simple utilizando lenguaje HTML y procesarlo con PHP.
Primero, es importante saber que el lenguaje PHP se puede ejecutar únicamente en un servidor.
Es decir, si nunca hiciste nada con PHP, y no tenés una página web subida en un hosting con acceso por FTP, vas a necesitar comenzar por un tutorial de “Primeros pasos en PHP“, o un poco más difícil los que se explican en “La manera correcta”
Es decir que empezamos pensando que ya hiciste algún programita mínimo con PHP.
También, que ya practicaste un poco creando un formulario que no utilice PHP.
Primer paso, el formulario
Para crear un formulario de contacto, por ejemplo, vamos a necesitar dos archivos. En uno va a estar el formulario en sí, en lenguaje HTML. Este podría ser el código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Enviar mensaje</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body>
<form action="enviamail.php" method="post" id="formulario_contacto"> <label for="nombre">Nombre</label> <input name="nombre" id="nombre" type="text" size="40" value=" " /> <label for="correo">Correo electrónico</label> <input name="correo" id="correo" type="text" size="40" value=" " /> <label for="mensaje">Escriba su mensaje</label> <textarea name="mensaje" id="mensaje" rows="5" cols="30" ></textarea> <div><input name="enviar" id="enviar" type="submit" value="Enviar mensaje" /></div> </form> </body> </html>
Los encabezados de HTML y tipo de codificación son obligatorios para crear un documento válido. La parte del formulario comienza en la sentencia form, y en la acción se utiliza el nombre del archivo que va a procesar el formulario (enviarmail.php), que está en lenguaje PHP.
Segundo paso, el programa que procesa los datos del formulario
Este archivo (enviarmail.php) recibe la información enviada al pulsar el botón “Enviar mensaje”. ¿Cómo utiliza esa información? Utilizando $_POST y el nombre del objeto en el formulario. Aquí guardamos los tres valores en tres variables:
$nombre = $_POST[‘nombre‘];
$mail = $_POST[‘correo‘];
$mensaje = $_POST[‘mensaje‘];
Este sería el contenido completo del archivo PHP, al cual le falta mucho trabajo todavía, porque no controla la validez de los datos, no da error si algo sale mal, etc.:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Enviar mensaje</title>
</head> <body> <?php
////Tomar el valor recibido y almacenarlo en variables///// $nombre = $_POST['nombre']; $mail = $_POST['correo']; $mensaje = $_POST['mensaje']; ///////Configuración del mensaje: destinatario y asunto/////
$mail_destinatario = 'blablablablabla@gmail.com';
$asunto = "Mensaje enviado desde el formulario";
///////Fin configuración//
///En esta próxima línea es donde verdaderamente se envía el mail/// mail ($mail_destinatario, $asunto, $mensaje);
echo "Mensaje enviado"
?>
</body> </html>
Tercer paso, aprender mucho más
Hacer un formulario que no permita código HTML (para evitar códigos maliciosos), que valide datos (para obligar a completar algunos campos o evaluar el contenido), o que guarde la información de diversas maneras (creando un archivo PDF, un archivo de texto o una base de datos) serán nuestros próximos pasos.
—
Artículos sobre cómo crear formularios accesibles: