25.4.15

LECCIÓN 5: Estructura de una página. Segunda Parte.

    Hola que tal lleváis el sábado, espero que bien, hoy vamos a continuar lo que dejamos la semana pasada .

ENCABEZADOS 


Usualmente cuando se escribe un documento tiene encabezados y titulares, pues ahora vamos a aprender a ponerlos. En el código HTML tienes seis niveles de importancia.
Las etiquetas que se utilizan son: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, la importancia de los encabezados los dan los números siendo la de mayor importancia <h1> y la de menor valor <h6>.
Vamos a ver cómo sería la estructura en html

<h1> Encabezado 1</h1>
<h2> Encabezado 2 </h2>
<h3> Encabezado 3 </h3>
<h4> Encabezado 4 </h4>
<h5> Encabezado 5 </h5>
<h6> Encabezado 6 </h6>


Un ejemplo de ejercicio de este tipo puede ser el siguiente:

< h1> Poema Romántico </h1>
<h2> Belleza Interior </h2>
<h3> Cuando te conocí, vi tu cara tan preciosa, vi tu cuerpecito lindo, tu forma de hablar graciosa </h3>


MEJORANDO LOS ENCABEZADOS

Ahora vamos a mejorar un poco el ejemplo anterior de encabezados con dos tipos de encabezados y dos párrafos.

<html>
<head>
     <title> Mi primera pagina WEB</title>
</head>nu
<body>
<h1> Mi primera página Web</h1>
<h2> Bienvenida</h2>
Hola a todos, como han deducido por el título esta es la primera página web que hago, espero que les guste. Fdo. Anescris
<h2>Propósito</h2>
En esta página iré practicando con los conocimientos que adquiera en un curso de html
</body>
</html>



Ejercicio 3
Ahora vamos a coger unos de los ejemplos del ejercicio 2 y lo vais a mejorar, en el tenéis que meter dos encabezados y dos párrafos.

 Esta semana ha sido un poco corto, pero hasta aquí se ha acabado estas primeras lecciones para conocer un poco más el lenguaje HTML o por lo menos los conocimientos básicos. La próxima semana empezaremos a ampliar lo que hemos aprendido, hasta conseguir hacer nuestra primera pagina web donde incluiremos imagenes, texto e hiperenlaces y mucho más .

     Se me olvidaba algo que deciros a partir del próximo post, espero que me dejeis en los comentarios algunos de los ejercicios, y dejarme comentarios y demas.








18.4.15

LECCIÓN 4: Estructura de una página

Hemos conocido las principales característica de HTML, ahora vamos a aprender a crear nuestra primera página y la estructura de la misma.
Os recomiendo antes de empezar hacer un recordatorio de las anteriores lecciones.



Estructura de una página

Lo primero que debéis saber para hacer vuestra página o vuestro blog es su estructura , lo que debéis indicar lo primero y saber que estáis escribiendo un documento HTML, así que para indicar que es un documento de este tipo tienes que utilizar la etiqueta <html> al principio y al final del documento con la única diferencia que tienes que poner / en el del final como en el siguiente ejemplo:

<html>
Código de la página
</html>

A su vez el cuerpo de la página tendrá dos grandes bloques: Cabecera y cuerpo
Un ejemplo lo vemos en los siguientes comandos:

<html>
<head>
Elementos de la cabecera
</head>
…. Resto de código de la página …..
</html>

En la cabecera contiene toda la información de la página y esa información lo indica la etiqueta title

<html>
<head>
<title> Mi primera página WEB</title
</head>
</html>

Yo he echo el ejemplo y quedaría así como estáis viendo. Daros cuenta que la WEB esta en blanco y no sale nada pero es normal ya que solo hemos puesto como se va a llamar la página. Os aconsejo hacerlo vosotros como lo podéis hacer con el bloc de notas del ordenador solo tenéis que guardar y cambiar la terminación txt y poner html, si no sabéis como hacerlo os recomiendo que miréis el tutorial que puse en el blog ( Aquí)






Os recomiendo poner un buen título porque es lo que se va a ver cuando se guarde en el menú de favoritos del navegador, cuando algún usuario quiera guardala. Aunque se puede cambiar el nombre, si es un título atractivo ni siquiera lo cambiaran.


 Ejercicio 1

Hacer algunos ejemplos de título para que veáis como quedaría y guardalo para próximas lecciones
·     -  La Nariz Roja
·     -  El jardín de Alicia
·    -   La Ciudad de Las Manualidades

Ahora os hablaremos de otra parte fundamental de nuestra página el cuerpo conocido con la etiqueta <body>, en esta etiqueta pondremos todos aquellos elementos que deseemos, imágenes, texto, videos, tablas, etc. Vamos a poner un ejemplo.
<html>
<head>
<title>Mi primera página WEB</title>
</head>
<body>
Hola a todos,este es un ejemplo de mi primera WEB, estoy muy ilusionada.
Fdo. Anescris
</body>
</hml>

Mirar como queda:



Ejercicio 2.
Cómo me imagino que tendréis las páginas anteriores guardadas vais a cambiar de html a txt y vais a hacer el mismo ejercicio otra vez añadiendo una frase para el cuerpo <body>

¡¡¡ Importante !!!
Aunque algunos navegadores aunque no pongas la etiqueta <body> y <html> se va a ver es recomendable ponerlo por lo que pueda pasar, ya que puede ser que algún navegador no lo reconozca y no se pueda ver.


Hasta aquí esta lección la semana que viene seguiremos complicando las cosas poniendo encabezados. Os espero en el próximo post que tengáis buen fin de semana. 

19.2.15

Html ¿Qué es? Qué características tiene?¿Qué necesitas para crear una página web?- Segunda Parte.


    Bueno , el pasado post quedamos en como enseñaros a hacer ese pequeño ejemplo y alguna más que he sacado, vamos a recordarlo:

<html>

     <body>
           <p>Esto es un párrafo. Bienvenidos a está página web.<p>
     <body>
<html>  



     Vamos a intentar que probéis como se vería si lo buscaras en internet, igual que veis en la foto de arriba, aviso solo podréis verlo vosotros, más adelante veremos como  podrá verlo más gente.


  • Podéis editarlo en editores de texto, como ejemplo: edit en Ms-Dos, Block de notas en Windows, Vi en Unix, tambien se puede utilizar Microsoft Word o WordPerfect pero tener cuidado ya que os puede traducir y os saldría mal , yo voy a utilizar Block de notas de Windows. 
  • Block de notas ¿Donde esta? en accesorios en vuestro ordenador mirar: 


  •     Cuando le deis al blog de notas os saldrá algo como esto:


  • Ahora copiar el código anterior y guardar y dar el nombre ejemplo.txt , os saldrá con la extensión .txt pero os tiene que salir con la extensión html o htm como cambiarlo a esa extensión ahora vamos a por ello.
  • Cuando hice la prueba tuve que rebuscar por la webs, alguno que me lo dijera porque se supone que tu puedes renombrar los archivos, hasta que encontré una web que me lo dijo como y donde, y allí vamos. Dale a Panel de control 





os saldrá esto y tenéis que darle a APARIENCIA Y PERSONALIZACION


Luego a OPCIONES DE CARPETAS



Y os saldrá en la pantalla algo como esto darle, 
hay tres pestañas, general, ver , buscar, darle a VER y quita la opción de ocultar las extensiones de archivo para tipo de archivo conocido, que esta marcado por defecto.


  • Después de todo esto ir otra vez al documento, dar al botón derecho del ratón y darle a cambiar de nombre y quita la extensión .txt que sale por html. 



  • Os quedará algo como esto, lo único que cambiará index por el nombre que le hayas puesto y dale al archivo y te debería salir.

     Os voy a poner otro ejemplo para que lo hagáis vosotros este es diferente, más adelante podremos hacer algo más.


<html>
<head>
    <title>Mi primera página WEB</title>
</head>

<body>
<h1>Mi primera página WEB</h1>
|
</body>
</html>

     Os debería salir algo así:


     Hoy dos en uno habéis aprendido a saber donde esta para cambiar la opción de carpetas de tu ordenador para que te salga la extensión y habéis echo unos ejemplos con código en html.

Felizzz díaaa

¿Qué os ha gustado lo que os he enseñado? ¿Teneis alguna pregunta? ¿Alguna duda? dejar vuestros comentarios o mandarme un correo electrónico a: anescris4@gmail.com pero más fácil para ti te lo pongo busca en la parte derecha del blog en mis redes sociales, aunque te lo pongo más fácil todavía ves el icono verde que tiene una carta, pues dale y te saldrá un formulario rellenalo y me llegará tu duda directamente a mi correo.


17.2.15

Html ¿Qué es? Qué características tiene?¿Qué necesitas para crear una página web?

 

     El código de Html , es un lenguaje que se emplea para el desarrollo de páginas de Internet.

    Las Características que tiene son las siguientes:


  • La Web tiene que ser distribuida: Tiene que repartir las información en páginas no muy grandes pero enlazadas entre sí.
  • La Web tiene que ser hipertexto y debe ser  facil navegar por ella.
  • Tiene que ser compatible con todo tipo de ordenadores  y con todo sistema operátivo.
  • Debe ser dinámico: El proceso de cambiar y actualizar debe ser ágil y rápido.


     Un ejemplo de sencillo de código es el siguiente:

<html>
            <body>
                       <p>Esto es un párrafo. Bienvenidos a está página web.<p>
            <body>
<html>

     Si os dais cuenta hay tres etiquetas, html, body y p , y tambien os dais cuenta que cuando se abre una etiqueta debes cerrar igual que has comenzado si no dará error.

    Para ver como se vería el ejemplo ,  es mi primera vez como lo he echo, el próximo día os enseñare a hacer este sencillo ejemplo, y otro más.


  ¿Para que utilizar el código de html?


  •   Serás capaz de aprovechar todas las características de ese lenguaje
  • Aunque se utilice un editor, seras capaz de modificarlo
  • No depender de nadie para poder hacer nuestra própia pagina Web o Blog.
     Bueno hasta el próximo post de html, para que no os olvideis será el próximo .