Los comienzos siempre son difíciles... ¿Qué programa necesito para escribir una página web? ¿Por dónde empiezo? ¿Qué pasa si me equivoco? ¿Puedo romper algo?
Poco a poco, antes de correr hay que aprender a caminar.
En el siguiente vídeo se explica que HTML se emplea únicamente para definir la estructura y el contenido o información de una página web, la presentación visual no se define con HTML (esto es muy importante que lo recuerdes, no lo olvides). También se muestra la estructura de un elemento (etiqueta) y se explican las etiquetas básicas (html, head, title, body, h1, h2, h3, h4, h5, h6, p, strong, em).
Nota: Si la presentación visual no se define con HTML, ¿entonces con qué se define? Se define con CSS (Cascading Style Sheets), y no te preocupes, eso te lo explicaremos más adelante. Ahora, recuerda, poco a poco.
El lenguaje HTML se emplea únicamente para definir la estructura y el contenido o información de una página web, la presentación visual no se define con HTML.
En la actualidad, el lenguaje HTML está desarrollado por el World Wide Web Consortium, el W3C, el organismo internacional que vela por el correcto desarrollo de la Web.
En la página del W3C puedes encontrar mucha información sobre HTML:
Para aprender HTML y otras tecnologías web te recomiendo el sitio web W3Schools. En este sitio puedes encontrar un apartado de tutoriales:
http://www.w3schools.com/
A continuación se explica la creación de una página sencilla con el Bloc de Notas de Microsoft Windows:
http://www.w3schools.com/
A continuación se explica la creación de una página sencilla con el Bloc de Notas de Microsoft Windows:
Lo que hemos visto ha sido una simplificación, para que sea más fácil de entender. En otro vídeo veremos detalles adicionales que son necesarios para que una página web sea realmente correcta.
Recuerda que la etiqueta principal de una página web es la etiqueta <html>. La etiqueta <html> debe encerrar todo el contenido de la página web. A mí me gusta, cuando escribo el código de la página HTML, escribir, cuando escribo la etiqueta de inicio, escribo automáticamente la etiqueta de cierre. Así no se me olvida. No es obligatorio, pero es un consejo que te doy.
A continuación, dentro de la etiqueta <html>, dentro de la página web, la siguiente parte, la primera parte es la cabecera, la sección <head>. En la sección <head> recuerda que se escribe información, los metadatos que definen cómo se va a procesar la página web, cómo se va a visualizar, pero normalmente en el <head> no se escribe nada que deba aparecer visualmente en la página web. Por ahora, lo único que sabemos escribir es la etiqueta <title>, que es el título de la página web. Le voy a poner de título “Érase una vez HTML”. Y recuerda, si hemos abierto la etiqueta <title>, debemos de cerrarla.
Después del <head> tenemos el apartado <body>, el cuerpo de la página. Todo lo que escribamos aquí en el <body> sí que se va a ver, se va a pintar en la página web.
El bloc de notas es un editor sencillo, ahora vamos a usar uno más potente, el Notepad ++ para seguir editando nuestra página web.
Notepad ++ es un editor gratuito, muy ligero y rápido, y dispone de interesantes características, como syntax hightlight, opción que colorea la sintaxis del código que escribimos, la opción de autocompletar etiquetas, o el soporte de diferentes juegos de caracteres, incluyendo Unicode. Dispone de un gran conjunto de plugins que amplía sus funciones.
LINK DE DESCARGA: https://notepad-plus-plus.org/download/v6.7.8.2.html
Etiquetas siempre cerradas.
Documentos bien formados.
Etiquetas en minúsculas.
Valores de los atributos siempre entre comillas.
Las listas son un elemento muy importante para estructurar correctamente el contenido de una página web. Como autor de páginas web debes seleccionar el tipo de lista adecuado para cada situación.
En el siguiente vídeo se explican los diferentes tipos de listas que existen en HTML (ul, ol, dl) y la creación de listas anidadas:
El lenguaje HTML, ya sea la versión HTML4 o la versión HTML5, posee tres tipos de listas.
Las listas no ordenadas, las listas ordenadas y las listas de descripción.
Cada una de estas listas se crea con una etiqueta específica de HTML:
<ul> para la lista no ordenada
<ol> para la lista ordenada
<dl> para la lista de descripción.
Los elementos de las listas se definen de la siguiente forma.
Para la lista no ordenada y la lista ordenada se emplea el elemento <li>.
Para la lista de descripción se emplean los elementos <dt> y <dd>.
Ul es el acrónimo de unordered list, lista no ordenada.
En una lista no ordenada, el orden de aparición de los elementos no es importante.
Cada elemento de la lista se define con <li>, que es el acrónimo de list item.
Los elementos de la lista se indican con símbolos, como círculos, cuadrados o rombos.
Notepad ++ es un editor gratuito, muy ligero y rápido, y dispone de interesantes características, como syntax hightlight, opción que colorea la sintaxis del código que escribimos, la opción de autocompletar etiquetas, o el soporte de diferentes juegos de caracteres, incluyendo Unicode. Dispone de un gran conjunto de plugins que amplía sus funciones.
LINK DE DESCARGA: https://notepad-plus-plus.org/download/v6.7.8.2.html
EJEMPLO CREACIÓN DE PÁGINA WEB CON HTML:
CLICK PARA AMPLIAR
Reglas Básicas:
Las listas son un elemento muy importante para estructurar correctamente el contenido de una página web. Como autor de páginas web debes seleccionar el tipo de lista adecuado para cada situación.
En el siguiente vídeo se explican los diferentes tipos de listas que existen en HTML (ul, ol, dl) y la creación de listas anidadas:
El lenguaje HTML, ya sea la versión HTML4 o la versión HTML5, posee tres tipos de listas.
Las listas no ordenadas, las listas ordenadas y las listas de descripción.
Cada una de estas listas se crea con una etiqueta específica de HTML:
<ul> para la lista no ordenada
<ol> para la lista ordenada
<dl> para la lista de descripción.
Los elementos de las listas se definen de la siguiente forma.
Para la lista no ordenada y la lista ordenada se emplea el elemento <li>.
Para la lista de descripción se emplean los elementos <dt> y <dd>.
Ul es el acrónimo de unordered list, lista no ordenada.
En una lista no ordenada, el orden de aparición de los elementos no es importante.
Cada elemento de la lista se define con <li>, que es el acrónimo de list item.
Los elementos de la lista se indican con símbolos, como círculos, cuadrados o rombos.
LISTAS
LISTA DE DESCRIPCIÓN
La Web se basa en dos conceptos que han sido explicados en el primer módulo de este curso: el hipertexto y la hipermedia.
El hipertexto permite crear, agregar, enlazar y compartir información con una estructura no secuencial que proviene de diversas fuentes por medio de enlaces. Los enlaces también se conocen como hipervínculos, vínculos o ligas (en Sudamérica). Y en inglés se emplean los términos hyperlink y link.
En el siguiente vídeo se explica qué es el hipertexto, los tipos de enlaces que se pueden crear (intradocumental, extradocumental) en las páginas web, el concepto de URL (Uniform Resource Locator) que ya debes conocer y se proporcionan algunos consejos para crear enlaces correctos.
