HTML Básico con Hee: 1 ¿Qué es HTML? ¿Para qué sirve? Primeros fundamentos

Ver el tema anterior Ver el tema siguiente Ir abajo

HTML Básico con Hee: 1 ¿Qué es HTML? ¿Para qué sirve? Primeros fundamentos

Mensaje por Hee-Young el Mar Abr 12, 2016 2:09 am


HTML Básico con Hee
Lección 1: ¿Qué es HTML? ¿Para qué sirve? Primeros fundamentos


Antes de iniciar la pequeña clase, agradezco a quien se tome la molestia de leer este tutorial, pero como todo en la vida, se necesitan unas indicaciones antes de iniciar la clase.

  • El Nivel de Dificultad es Básico, por lo que, si eres más experimentando en el formato HTML posiblemente esto no te sirva para nada, pero pido que no critiques a las personas que si están interesadas en este tema y lleguen a postear alguna duda que les pueda surgir, después de todo, nadie nace sabiendo y una burla, por mínima que sea, puede quitarle las ganas a quien sea de aprender.
  • El tutorial esta realizado para la plataforma de ForoActivo, dirigido a la creación de tablillas y un mejor entendimiento de estas propiedades, por ende, si lo que buscas es saber cómo crear una página HTML y demás, este no es un tutorial para ti.
  • Como dije antes y, a pesar de ser reiterativa, es un tutorial de HTML, no CSS ni tampoco JS, por ende no pidan nada referido a ello porque no está destinado a ese rubro.
  • Es un tutorial de mi autoría, por lo que, si lo ves en otro lugar, infórmamelo porque de momento, solo estoy publicando en y para M-Chains. Y por lo mismo, está prohibido copiarlo, postearlo en otro sitio y demás, sin mi permiso.
  • Al no ser esta mi única cuenta aquí, si tienes dudas, aunque fueran mínimas, postéalas y no envíes Mp, porque quizás lo lea el mismo día, como luego de 2 semanas cuando ya no te interesaría mi respuesta.
  • A pesar de que este sea un tutorial, tómenlo como una mini-clase, si desean aportar algo más a lo ya expuesto, retomar una pregunta anterior y demás, háganlo con confianza. Se trata de aprender y todo nuevo consejo, apoyo, pregunta o aporte siempre sirve.
  • Si quieres dejar una pequeña crítica, o pedir algo en especial para un nuevo tutorial, eres libre de hacerlo. Pero, las críticas deben ser constructivas, y si deseas que explique algo de HTML, no hare caso de “presiones”, ya que quiero ir paso por paso, para aquellos que apenas inicien en el tema, después de todo, ni siquiera yo soy experta en esta rama.
  • Si quieres ser un “Alumno Fijo”, puedes postear aquí algo simple como… “Quiero seguir tus clases” y me guiare de eso, para enviar un Mp a la cuenta que lo menciono, cada que saque un nuevo tutorial.
  • A quienes sean “Alumnos fijos” les dejare una pequeña tarea luego de cada clase, para ir mirando su progreso, pueden ser desde una captura, hasta el diseño hecho y posteado.




Inicio de clase
Parte 1

Para iniciar, lo más correcto sería explicar lo que es HTML, y por ello, recurriré a Wikipedia.


Wikipedia escribió: HTML, sigla en inglés de HyperText Markup Language (lenguaje de marcas de hipertexto), hace referencia al lenguaje de marcado para la elaboración de páginas web….
Es un estándar a cargo del World Wide Web Consortium (W3C) o Consorcio WWW, organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación. Se considera el lenguaje web más importante siendo su invención crucial en la aparición, desarrollo y expansión de la World Wide Web (WWW). Es el estándar que se ha impuesto en la visualización de páginas web y es el que todos los navegadores actuales han adoptado.
El lenguaje HTML basa su filosofía de desarrollo en la diferenciación. Para añadir un elemento externo a la página (imagen, vídeo, script, entre otros.), este no se incrusta directamente en el código de la página, sino que se hace una referencia a la ubicación de dicho elemento mediante texto. De este modo, la página web contiene solamente texto mientras que recae en el navegador web (interpretador del código) la tarea de unir todos los elementos y visualizar la página final. Al ser un estándar, HTML busca ser un lenguaje que permita que cualquier página web escrita en una determinada versión, pueda ser interpretada de la misma forma (estándar) por cualquier navegador web actualizado.
Si desean leerlo completo, pueden verlo mediante este Link

Ahora con lo expuesto, seguro se estarán preguntando ¿Y eso para que me sirve, si no se enseñara a hacer una página Web? Pues, si bien en este tutorial no se explicara eso, el HTML sirve para mucho más, puesto que, como bien explico Wikipedia, mediante una pequeña codificación pueden crear desde tablillas, hasta enriquecer sus firmas, todo depende de su imaginación y el empleo de los diversos recursos. Eso sin mencionar que actualmente los foros de rol, en prácticamente todos lados, utilizan este formato en las fichas, y es de utilidad comprender como funcionan, ya que muchos le tienen “miedo” a desconfigurar, cuando la realidad, es que con la práctica, se vuelve no “sencillo”, sino comprensible.

Otro dato que deben conocer, es que la codificación solo se da en Ingles, pero es tan básico que, a pesar de no saberlo bien, con la práctica empezaran a comprenderle, llegando a, en algunos casos, memorizarse ciertos “atributos”.

Otro dato que deben tener en cuenta, es que existen muchas páginas en internet, completamente gratuitas y sin necesidad de crearse una cuenta, donde pueden probar sus códigos, para chequear su funcionamiento antes de intentar hacerlo dentro del foro. Por ejemplo, una que les puede ser de utilidad, y en la cual trabajare será en esta: Link


Como verán, tiene 4 espacios, el HTML, CSS, JAVASCRIPT y el de RESULT. Nosotros solo utilizaremos el HTML así que pueden ampliarle tanto como quieran, recodando dejar espacio para el RESULT, porque allí es donde apreciaran como se verá lo que apliquen.

Aclarare que para poder ver el resultado de código, deben presionar el botón Run, situado arriba, puesto que no hará nada hasta que den esa pequeña orden. Otra cosa, los tamaños que pongan allí, no siempre compaginaran con los del foro, así que probablemente, deban retocarlo al desear postear, sobre todo si es una tablilla muy grande.


Parte 2

Con lo ya expuesto antes, y la página citada, estamos listos para empezar a trabajar los fundamentos más básicos. En esta ocasión veremos lo siguiente:


  • div [Para abrir y cerrar la tablilla]
  • width [Ancho]
  • height [Alto]
  • border [Borde o contorno]

Estos 4 pequeños fundamentos, son algo que deben memorizarse bien, puesto que los emplearan desde el inicio, e incluso cuando intenten hacer tablillas más elaboradas. Si intentamos compararlo con algo diario, sería como aprender a sumar y restar, la base más elemental.

Ahora bien, para iniciar con las practicas, haremos un pequeño recuadro o “marco”. Aclarare que todo código HTML, y cuando digo todo, es TODO, inicia con un Div y termina con un Div. En este caso abriremos así

Código:
<div style=”propiedades a colocar “>

Y cerraremos así

Código:
</div>

Entonces debe verse de este modo

Código:
<div style=”propiedades a colocar “> Contenido dentro del recuadro</div>

Eso es para iniciar, ahora explicare los demás elementos.
•  width: Este es el Ancho que tendrá nuestra tablilla, el mismo está definido en Pixeles y debe expresarse del siguiente modo.

Código:
width: 200px

•  height: Este es el alto que tendrá nuestra tablilla, el mismo está definido en Pixeles y debe expresarse del siguiente modo.

Código:
height: 20px

•  border: Este es el borde que tendrá nuestra tablilla. Este es un poco más complejo ya que tiene más elementos, tales como los pixeles que definirán su grosor, el color que llevara y el tipo de borde deseado.  Este atributo debe expresarse del siguiente modo.

Código:
border: solid [tipo de borde] 10px [grosor] #ff0099 [color]

Otros tipos de bordes son estos:

Captura realizada Aqui

Con esto explicado, es momento de llevar los elementos al code

Código:
<div style="width: 200px; height: 20px; border: solid 10px #ff0099;"> Contenido dentro del recuadro </div>

Esto dará como resultado lo siguiente:


Lo que si destacare y no debe pasar inadvertido, es que, entre elemento y elemento, después de aplicarle, ya sea los "pixeles" en el ancho y largo, o "pixeles-color-estilo" en el borde, debe colocarse un “;” conocido como “punto y coma”, ya que si no, el code no será tomado puesto que eso separa los elementos.

A continuación lo separara en color y tamaño grande, para que se percaten mejor


Como final, y aunque creo que esta algo comprensible, lo que se coloca entre

Código:
<div style="width: 200px; height: 20px; border: solid 10px #ff0099;">

Y

Código:
</div>

A lo que yo llame “Contenido dentro del recuadro”, es lo que estará dentro del cuadradito que hicimos, claro que, si nos pasamos de los pixeles dados por el “height” las letras quedaran fuera, solo es cuestión de agrandar el tamaño. Sin embargo, en tutoriales siguientes explicare como ir adaptando el contenido a un tamaño mínimo, aplicación de Scroll –barrita que baja y sube – y demás cosas, pero de momento lo dado aquí son las propiedades más básicas con las cuales pueden iniciar a practicar.



Tarea

Crear un cuadrito, aplicando lo aprendido aquí con los siguientes parámetros:

Alto: 120
Ancho: 250
Borde: A elección
Contenido dentro del recuadro: Frase a elección

Les recomiendo probarlo primero en la página que les pase más arriba, y luego, pueden hacerle una captura, o postearlo como respuesta en este tema.

Un Ejemplo

Ejemplo para la clase del HTML dada por la zorrita esponjada




Final de la Clase

Con esto damos por concluida la Clase/Tutorial. Gracias por pasarse a leer, en caso de tener dudas, tanto del tema como la tarea, posteen a continuación y lo explicare con todo gusto, también posteen si quieren ser un Alumno regular –Explicado en el inicio del tutorial.

Igualmente, no se preocupen si las cosas no les salen a la primera, es normal desesperarse un poco con el HTML, a todo programador, usuario normal y conocedor del HTML, le sucedió cuando empezó a aprender, pero la clave está en perseverar, si no te sale a la primera, date un rato y vuelve a intentar y si aun así tienes problemas, puedes postear aquí tu inconveniente –en lo posible con capturas – para que así pueda darte una mano y explayar más, después de todo tu duda puede tenerlo Fulanito, Panchita, Paquita o Menganito, así que no tengas pena, pero si aun así te incomoda, hazlo en Hide o Spoiler.



Volver arriba Ir abajo

Re: HTML Básico con Hee: 1 ¿Qué es HTML? ¿Para qué sirve? Primeros fundamentos

Mensaje por Mizuki Kondo el Mar Abr 12, 2016 2:38 am

Tarea u v u

Los chicos locos muestran una sonrisa aunque parezca una risa forzada


Notita:
Me siento rara por estar posteando esto a los diez minutos de que lo colocaras ewe

Volver arriba Ir abajo

Re: HTML Básico con Hee: 1 ¿Qué es HTML? ¿Para qué sirve? Primeros fundamentos

Mensaje por Nao Lawrence el Mar Abr 12, 2016 3:30 am

"Porque salvar a la persona que amas no es estúpido. Y tampoco es una opción".

Volver arriba Ir abajo

Re: HTML Básico con Hee: 1 ¿Qué es HTML? ¿Para qué sirve? Primeros fundamentos

Mensaje por Tsubasa kurokami el Lun Mayo 02, 2016 10:54 am

Tres tristes tigres comen trigo en un trigal (?)


Quiero ser alumno fijo~~

Volver arriba Ir abajo

Re: HTML Básico con Hee: 1 ¿Qué es HTML? ¿Para qué sirve? Primeros fundamentos

Mensaje por Hee-Young el Lun Mayo 16, 2016 11:02 pm

Buen trabajo para aquellos que hicieron la tarea.
Les informo que el nuevo tutorial ya esta subido.

Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba

- Temas similares

 
Permisos de este foro:
No puedes responder a temas en este foro.