Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Primeras nociones de HTML
#1
Para aquellos que no tengan idea de este lenguaje, empesé una serie de mini tutoriales para crear una pagina usando sólo el html y despues empesar con css. aqui les dejo el primero de los que pueden seguir en mi pagina, jejeje.
----------------------------------------------------------------------------------------
El lenguaje HTML es el lenguaje utilizado para la transmision de datos entre los ordenadores interconectados en todo el mundo a través de lo que se ha venido en llamar INTERNET o red de redes. Tratar de explicar sus orígenes sería muy largo y aburrido, así que sólo señalaré que este lenguaje especial para asegurar la comunicacion entre las máquinas tuvo un origen militaren los años 50, pero a partir de los 90 experimentó un auge por parte de la sociedad civil y hoy se ha convertido (me refiero a Internet) en una herramienta imprescindible en el mundo moderno.
Nosotros, aquí, nos limitaremos a hablar de su uso para elaborar una página web interesante y de calidad sin recurrir a los tipicos editores al uso (Dreamweaver, Frontpage, NVU, etc.)
Antes de nada, decir que conforme voy aprendiendo (a veces repasando) los conceptos de edición web en HTML, los iré posteando aquí, para que nos vaya sirviendo a todos. De vez en cuando os propondré una tarea para que sigáis vuestro progreso al mismo tiempo que el mio.
En primer lugar una pregunta. ¿Por qué editar o construir una página a base de código HTML puro y duro si tenemos programas muy buenos como DREAMWEAVER, FRONTPAGE, NVU, etc? Bueno pues porque cada uno de esos editores programa la página a su manera haciendo que se vea bien en determinados navegadores y en otros no se vea tan bien. Particularmente "delicado" es Internet Explorer, que hasta la fecha no respeta muchas de las convenciones en la edición con lenguaje HTML. De esa forma, lo que se ve bien en Firefox, Ópera, u otros, puede que el explorer tenga problemas para mostrarlo. Ya iremos viendo truquillos para forzar al Explorer a mostrar lo que nosotros queramos que muestre y de la manera que nosotros queramos, jejeje. Pero no nos vayamos del tema Guiño.
Todas las páginas web comienzan siempre con la etiqueta <HTML> y terminan con la etiqueta </HTML>.
La primera etiqueta nos marca el principio de la página y la segunda el final. En medio se colocará todo el resto de la web que pretendemos construir. Así, pues, lo que esté fuera de esas dos etiquetas se considerará que no forma parte de la web y no se mostrará.
Una vez claro esto, vamos a ver otro concepto fundamental y es que toda web se compone de dos partes bien diferenciadas: la cabecera y el cuerpo.
La cabecera se emplea para dar informacón acerca del documento(título, autor, fecha de creación..., mientras que en el cuerpo se va a mostrar el contenido real de la página, es decir, la información que queremos que el usuario vea.
Como el lenguaje HTML está basado en el inglés, las etiquetas están todas en inglés. Así, para la cabecera utilizaremos la etiqueta de apertura <HEAD> y la correspondiente para el cierre que sería </HEAD> y para el cuerpo utilizaremos <BODY>....</BODY>.
Por lo tanto la estructura de una página web sería como sigue:
Código:
<HTML>
<HEAD>
----- aquí pondremos la información  de nuestra página, es decir, LA CABECERA-------
<BODY>
-----aquí pondremos todo el contenido de nuestra web, o CUERPO-------
</BODY>
</HTML>
Cada etiqueta de apertura debe tener su correspondiente etiqueta de cierre en todas las páginas para tener un documento HTML correcto (Hay algunas expepciones que ya iremos viendo)
En la cabecera hemos dicho que va la información sobre nuestra página, esa informacion es optativa,es decir, se puede incluir o no según la voluntad de cada uno, pero siempre es conveniente incluir, al menos, el título de la página que es lo que aparecerá en la parte superior del navegador, en la barra azul, y en las solapas correspondientes si el navegador utilizado tiene ese componente
[Imagen: titulodelapagina.jpg]
¿Adivináis cómo tenemos que poner el título de la página dentro de la cabecera? jajajaja, pues claro, por medio de una etiqueta de apertura y otra de cierre, jajaja ¿A que no lo imaginabais? Lengua
En este caso, utilizaremos <TITLE>....</TITLE> (jajajaja, si, claro seguimos con el inglés, jajaja, ya que la traducción es evidente, ¿no?)
Así, la estructura anterior podría quedar así:
Código:
<HTML>
<HEAD>
    <TITLE>Primera página de prueba</TITLE>
<BODY>
-----------------------------------------
------------------------------------------
-------------------------------------------
-------------------------------------------
</BODY>
</HTML>
Pero habrá ocasiones en que para no perdernos en sucesivas modificaciones, queramos introducir notas QUE NO SE VEAN CON EL NAVEGADOR pero que nos guíen a la hora de modificar algo. Para eso utilizaremos los comentarios, que no son otra cosa que etiquetas (jajaja, más etiquetas) que le indican al navegador que lo que hay entre ellas no debe ejecutarlo. En este caso utilizaremos la etiqueta <!-- al inicio del comentario y la etiqueta --> al final (ambas separadas por un espacio del texto o línea que acompañan). Comprobadlo en el siguiente ejemplo:
Código:
<HTML>
<HEAD>
    <!-- Esto es la cabecera de mi página-->
    <TITLE>Primera página de prueba</TITLE>
<BODY>
    <!-- Aquí irá todo el contenido de mi futura web: textos, fotos, vídeos, sonidos, enlaces, etc. Y se llama CUERPO -->
-----------------------------------------
------------------------------------------
-------------------------------------------
-------------------------------------------
</BODY>
</HTML>
Bueno, pues proceded a guardar el documento (este último) con el nombre que queráis (por ejemplo podría ser el socorrido de miprimerapaginaweb.html), ya que no viene mal tener una plantilla siempre a mano para evitarnos trabajo en el futuro, jejeje-
Eso es todo por hoy. en el próximo intentaré enseñaros más cositas. A ver vuestros primeros pinitos y os recomiendo seguir el curso paso a paso, sin prisas pero sin pausas Lengua

Tutorial Original por: papi1
[Imagen: bann.png]
WWW


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
Sonrisa Login->html+js+ajax+php wpadilla 2 67 05-11-2017, 12:39 PM
Último mensaje: piensaengrande
  PRIMER PAGINA WEB HTML DEL MUNDO Smithcanal 27 467 21-10-2017, 01:47 AM
Último mensaje: ReyNexo23
  Plantillas HTML Responsive Free Profesionales gassip 16 442 13-06-2017, 03:45 AM
Último mensaje: gassip
Música [Aporte] Reproductor de audio html djsmokingcr 11 373 02-05-2017, 03:04 AM
Último mensaje: gassip
  [Tutorial] Métodos para redireccionar URLs (HTML, PHP y Javascript wiston3 1 197 01-12-2016, 11:12 PM
Último mensaje: zeuz
  Expandir etiquetas HTML en documento .php con EMMET gassip 2 242 18-11-2016, 07:28 PM
Último mensaje: DaveNPlay
  [Aporte] PcTag: Información HTML KesiaMuller 0 231 28-10-2016, 05:42 AM
Último mensaje: KesiaMuller
  [Tutorial] Curso de PSD a HTML a WP habacuc78 14 681 31-08-2016, 09:33 PM
Último mensaje: ServiRemate
  Elementos que desaparecieron de HTML 5 Kevin9908 2 285 02-08-2015, 04:55 PM
Último mensaje: avdarie
  web con html o cms efbsfcd 7 455 01-07-2015, 03:12 PM
Último mensaje: d0rag0n



Usuarios navegando en este tema: 1 invitado(s)