quieroprogramartambien - Tumblr blog

quieroprogramartambien · 5 years ago

Audio

Hola, vamos a repasar el documento creado por brackets, si, nuestra plantilla base para comenzar a maquetar nuestro html. En primer lugar tenemos nuestra etiqueta DOCTYPE que nos indicará que nuestro documento es para maquetar en html

<!DOCTYPE html>

A continuación podemos ver nuestra primera etiqueta después de declarar nuestro documento con el DOCTYPE, y la primera etiqueta que encontramos es html lang, donde definiremos en su atributo el lenguaje o idioma en el que estará escrito nuestro documento, podemos usar español 'es', para inglés 'en' y así con cada idioma diferente

Para continuar, tenemos nuestra cabecera, donde definimos la codificación de caracteres a utilizar en nuestro documento, el titulo de nuestra página web, los metadatos que serán invisibles para nuestra maquetación pero importantes para los navegadores donde se verá nuestra web. También tenemos los LINK que nos sirven para enlazar los estilos css que usaremos e icono para nuestro sitio

<head> <meta charset="utf-8"> <title>Example Title</title> <meta name="author" content="Your Name"> <meta name="description" content="Example description"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href=""> <link rel="icon" type="image/x-icon" href=""/> </head>

He aquí la etiqueta body, es aquí donde vas a maquetar todo lo que quieres mostrar en el cuerpo de tu documento, dentro de él hay etiquetas básicas ya creadas, como el header, para dar una estructura principal de encabezado, el main, para mostrar el contenido principal y el footer, que te servitá para tu pie de página. Por último tienes una etiqueta script, es aquí donde enlazarás tu documento javascript para hacer tu página web más dinámica

<body> <header></header> <main></main> <footer></footer> script type="text/javascript" src="" /script </body>

Y VOILÀ, ya tienes tu documento inicial explicado para comenzar a maquetar tu web, recuerda cerrar html al final de tu documento. Este documento debes guardarlo como index.html, ya que será la página web principal de tu proyecto. Y tu código quedaría algo así

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Titulo de tu página web</title> <meta name="author" content="Tu nombre como autor de esta web"> <meta name="description" content="La descripción de tu sitio web"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href=""> <link rel="icon" type="image/x-icon" href=""/> </head> <body> <header></header> <main></main> <footer></footer> script type="text/javascript" src=""/ /script/ </body> </html>

#curso html #doctype #html #css #javascript

2 notes · View notes

quieroprogramartambien · 5 years ago

Audio

Hola, vamos a ponernos en contexto. HTML, siglas en inglés de HyperText Markup Language (‘lenguaje de marcas de hipertexto’) es un lenguaje de marcado para crear páginas web, basando su filosofía escrita en etiquetas o elementos rodeadas por los signos de menor qué '<' y mayor qué '>'.

HTML puede describir la apariencia de un documento(hasta cierto punto claro, para dar estilo ya tenemos css, pero por momento volvamos a html) y puede hacer referencias o incluir a un tipo de programa llamado script que nos ayudará con el comportamiento de los navegadores web(para esto usaremos javascript)

ELEMENTOS

Generalmente los elementos tienen etiquetas que poseen inicio y fin (por ejemplo <nombreEtiqueta></nombreEtiqueta>) contando con dos propiedas básicas, conocidas como atributos y contenido. Los atributos se escriben en las etiquetas de comienzo de un elemento después del nombre del elemento(<nombreEtiqueta atributo="valor">...) y el contenido lo que escribimos dentro de las etiquetas de inicio y fin de un elemento (<nombreEtiqueta>Contenido de etiqueta</nombreEtiqueta>)

Este lenguaje puede escribirse y editarse con cualquier editor de texto básico o algún otro editor de texto especializado para crear de sitios web con caracteristicas WYSIWYG(What You See Is What You Get/Lo que ves es lo que tienes) permitiendo ver el resultado de lo que hayas editado en tiempo real mientras vas desarrollando tu documento html

#curso html #javascript #script #WYSIWYG #etiquetas #css

2 notes · View notes

quieroprogramartambien · 5 years ago

Audio

Hola, para trabajar con html5 necesitas un editor de texto para empezar a maquetar la estructura de tu web. Puedes utilizar el bloc de notas por defecto y funcionaria a la perfección. Pero actualmente existen editores de textos adaptados para el desarrollo web que nos ayudan visualmente a la hora de maquetar y Brackets es uno de ellos

Para instalar Brackets en nuestro sistema operativo, sólo dirígete a http://brackets.io/ y descarga la versión actual

Una vez descargada, debes aceptar los términos y condiciones que nos solicita la aplicación para poder utilizarla, pulsa siguiente un par de veces, espera su instalación y VOILÀ, pulsa finalizar y tienes ya brackets instalado

Ahora vas a instalar una extensión que nos servirá para hacer más agradable el entorno de trabajo. Una vez abierta la aplicación, te diriges a Archivo>Gestionar extensiones

y te aparecerá un cuadro para buscar la extensión que quieres, escribe html5 y elige la opción 'Better HTML5 template' y lo instalas. Haz lo mismo con otras dos extensiones, busca brackets icons y lorem ipsum generator para instalarlos

Para probar tu primera extensión instalada, crea un nuevo documento, Archivo>Nuevo,

una vez ya tengas tu archivo en blanco para empezar a maquetar, vas a la opción Edición>Better HTML5 Template

y automáticamente te generará una plantilla base para empezar a trabajar en HTML.

Una vez tengas tu plantilla base creada guardas el documento dentro de una carpeta donde vas a guardar todos los progresos que aprendas, y a este documento lo guardarás como index.html

¡Y es todo! Ya tienes tu entorno de trabajo listo para maquetar

#curso html #html #brackets #entorno de desarrollo #html5 #css

2 notes · View notes