VAMOS A CREAR PÁGINAS PARA LA WEB

La web se conforma de un conjunto de cientos de miles de documentos entrelazados, para escribir estos documentos se utiliza el lenguaje de marcado e hipertexto HTML. Estos documentos pueden ser escritos en cualquier editor de texto como, Bloc de Notas, Microsoft Word, Sublime tex, Visual S

Los documentos HTML se conforman como documentos de texto sin ningún tipo de formateo especial, en los que todo el contenido del documento se especifica mediante marcas denominadas etiquetas.

Las etiquetas o tags  son  marcas  de  texto  que empiezan por el carácter, de la forma, para las etiquetas de inicio:

ETIQUETA

Y que se forman con el carácter, de la forma, para las etiquetas de final de marcado:

/ETIQUETA

Ejemplos de etiquetas de HTML son:

 

Los atributos de las etiquetas, especifican parámetros adicionales a la etiqueta, y se especifican en la etiqueta de inicio de la siguiente forma:

ETIQUETA ATRIBUTO ATRIBUTO…

La forma de dichos atributos será bien el nombre del atributo, seguido de =, para especificar el valor que se le quiere asignar (generalmente entrecomillado).

Por ejemplo:

Estructura  de    los documentos HTML

Todos los documentos HTML siguen aproximadamente la misma estructura. Todo el documento debe ir contenido en una etiqueta html, dividiéndose en dos partes: la cabecera, contenida en una etiqueta head y el cuerpo del documento (donde está la información del documento), que está envuelto por una etiqueta body. La cabecera contiene algunas definiciones sobre el documento: su título, marcas extra de formato, palabras clave, etc.

Ejemplo:

!DOCTYPE html

html lang="en"

head

    meta charset="UTF-8"

    meta name="viewport" content="width=device-width, initial-scale=1.0"

    titleDocument/title

/head

body

    h1Hola Dídier bienvenido al Diseño y desarrollo web/h1

/body

/html

Si abrimos un documento con este contenido en un navegador web apreciaremos que lo que contienen las etiquetas title no se visualiza en el documento, sino que el navegador las visualiza en la barra de título de la ventana.

Siempre nuestros documentos los guardaremos con la extensión .html. Ejemplo index.html, si abrimos en el navegador web el archivo index.html se verá así:

 

Para que aprendas a utilizar Visual Studio Code mira este video:

ACTIVIDADES DE APRENDIZAJE

EVALUACIÒN

 

  • Si solo tienes celular descarga el editor Sublime Text desde este enlace: https://play.google.com/store/apps/details?id=com.csgroup.texteditor
  • Copia la estructura del ejemplo de un documento en HTML en el editores que instalaste, cambia el nombre del profesor por el tuyo en la etiqueta h1, luego guarda el archivo como html
  • Busca el archivo que guardaste dale doble clic para verlo en tu navegador web.
  • Copia en una hoja de papel a cuadros la estructura de HTML y señala sus dos partes principales Cabecera (head) y el cuerpo (body).

 

Tomado del MINEDUC. (Ministerio de Educación de Ecuador).

243 Puntos de vista