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.








Publicado por en No hay comentarios:
Etiquetas: , ,

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. 
Publicado por en No hay comentarios:
Etiquetas: , ,

16.4.15

Tutorial, incrustar un codigo html en un post en tu blog

   Hola, ¿Qué tal lleváis el jueves? Pues yo bien, casi acabando la semana, en el tutorial de hoy aprenderéis como inscrustar un código html en tu post para que sirve eso te voy a poner varios ejemplos:


  • Podrás hacer tablas de imágenes como esta


  • Podrás incrustar una revista online en tu blog

A mag created with Madmagz.

  • Podrás poner un banner para enlazarlo



Código para enlazarme




  • Podrás poner un formulario de contacto en tu blog
foxyform


  • Podrás poner un formulario para sorteos o encuestas


 Quieres aprender a inscrutar código html en tu post de blog pues sigue el tutorial



  • Bueno lo primero que tendremos que hacer es dar a entrada nueva o en la entrada que estes editando en este momento.



  • Tendras que darle a edición en html y os deberá salir algo como esto




  • Ahora tienes que mirar donde vas a poner el código, en mi ejemplo yo voy a incrustar la revista online de este mes en una entrada en este mismo blog



  • El código que tengo inscrutar es el siguiente:

 <iframe src="https://madmagz.com/magazine/embed/518199?layout=2&amp;width=600" width="600" height="424" scrolling="no" frameborder="0"></iframe><p>A mag created with <a href="//madmagz.com/?utm_source=publisher&amp;utm_medium=embed&amp;utm_campaign=viewer">Madmagz</a>.</p>




  • Ahora solo tienes que volver a dar a Redactar y te deberá salir algo como esto



    Pues ya sabes como incrustar cualquier código html para hacer estas cosas en el blog espero que te halla gustado mucho el tutorial y sobre todo que te halla sido fácil. Ya sabes cualquier duda dejame un comentario te contestare en cuanto pueda.

Publicado por en No hay comentarios:
Etiquetas: ,

24.3.15

Lección 3 - Las Bases del HTML


     Otra semana vamos a aprender un poco más sobre HTML hoy vamos a aprender un poco sobre la base del html.

     Las ordenes del lenguaje HTML están formados por comandos llamados etiquetas y tienen la siguiente estructura
<NOMBRE_ETIQUETA>
<NOMBRE_ETIQUETA>TEXTO</NOMBRE ETIQUETA>
     Para indicarle al navegador que queremos pintar un linea deberemos escribir <hr>


     veis la línea es muy fácil solo tienes que escribir ese comando en redactar en html y te saldrá.

       Os estaréis dando cuenta que cuando se escribe en código  html el comando se esta encerrado entre <>. No lo olvidéis nunca cuando hagáis comando ya que si no lo hacéis no seguirá las instrucciones.

     Siguiendo el ejemplo de pintar una linea vamos a ir un poco más es decir vamos añadir algo más al comando <hr>  y vamos a añadir que el grosor sea diferente si queremos hacer esto vamos a especificarlo de la siguiente manera:
<ETIQUETA ATRIBUTO="VALOR">
<hr size="1"
  1. Nombre de la etiqueta que aquí es hr
  2. Después lo que queremos hacerle a la etiqueta hr que en este caso es tamaño: size
  3. la etiqueta "valor" le daremos el valor en número y siempre deberá estar entre comillas ""
EJERCICIOS

  Vamos a practicar a hacer diferentes tipos de lineas, dándole los siguientes valores que serán 3,5, 7,10 y 15. Meteros en el siguiente enlace: http://www.htmlinstant.com/ , aquí podréis hacer los ejercicios que os digo y os debería salir algo así

RESOLUCION

     Como no soy tan mala voy a hacer el ejercicio para que salga en la entrada ok como estamos empezando lo voy a hacer así pero cuando se vaya aumentando la complicación de los ejercicios no os pondré la resolución hasta una próxima entrada.
<hr size="3">
<hr size="5">
<hr size="7">
<hr size="10">
<hr size="15">




Publicado por en 3 comentarios:
Etiquetas: ,

26.2.15

Primeros pasos para publicar en un blog- 2 PARTE

    Buenos días, seguimos con el post que nos quedamos el martes pasado de como publicar un post en tu blog.


vamos a ver lo nos encontramos cuando queremos hacer un post,

  • Título de la entrada: Lo que primero va a ver tus seguidores, un buen título hará un llamado a posibles seguidores.
  • Publicar: Aquí podras darle para que se publique tu entrada.
  • Guardar: Normalmente se irá guardando tu entrada automaticamente , pero si no estas seguro darle a guardar, es muy práctico cuando quedas a la mitad tu entrada porque tengas que salir a algun sitio y no te de tiempo a acabarla.
  • Vista previa: Aquí puedes ver como va a quedar tu entrada, sobre todo si quieres ver como quedan las imagenes.
  • Cerrar: Cuando quieras salir de la entrada por cualquier cuestión puedes hacerlo aquí.
     En la parte de abajo encontrareis lo que más vais a necesitar para editar vuestra entrada, os vais a encontrar dos íconos: Redactar y HTML

  • Redactar: Es la forma clásica de escribir, y más facil de editar tu post, 
  • HTML: Esta es más complicada, porque a partir del lenguaje html, podras insertar enlaces, fotografias, hacer tablas de imagenes, insertar revistas online, para ver como se ve solo teneis que darle a HTML de arriba, 
Imagen y poder escribir encima en el post.

Aquí podeis ver como escribo dentro de la imagen,  esta chulo no
podeis hacer algo parecido en vuestro blogs, ya os enseñare a hacerlo
sobre todo en blogs de recetas estan muy bien .


     Es facil no o lo parece así puedes hacer diferentes cosas y que nos quede un blog bonito y diferente.
     Al lado de HTML encontrareis lo siguiente:



  • : Es para deshacer o rehacer algo


  • : Fuentes y Tamaño de la Fuente

  • :Negrita , cursiva, subrayado, tachado


  • : añadir un enlace, añadir una imagen, añadir un video, añadir  salto de página


  • Alinear Izquierda, centrado,derecha o justificado



     Iremos haciendo pequeño tutoriales para que veais ya que hay mucho si no se haria muy extendido, la entrada y ya se esta haciendo larga.

      Y por ultimo veremos
: las comillas son para hacer citas y el otro para eliminar el formato

Con estos se pueden hacer listas o enumeraciones quedaria algo como asi:

  1. azul
  2. blanco
  3. amarillo
  • azul
  • blanco
  • amarillo
       Es util porque si quieres hacer lista no hace falta poner los números se ponen automaticamente solo debes hacer un click y se señalara.


: y esto es para correguir si le das las palabras que esten escritas incorrectamente se pondran amarillo no es fiable al 100% asi que si dudas busca un diccionario jejeje.


     A la derecha de la entrada hay otro apartado es la Configuración de la entrada y sale algo parecido a esto:



  • Etiquetas: Muy conveniente para luego enlazar el menu de páginas, o para ir más facilmente a algún sitio
  • Programar: Puedes dejar programado tu blog, para varios meses o semanas depende de lo que te convenga, sobre todo si tienes varios blogs, es muy conveniente, yo lo hago por meses o semanas dependiendo del blog , en mi blog http://anescris.blogspot.com.es/ lo hago por semanas y en el blog: http://podemos-juntos.blogspot.com.es/ lo hago una vez al mes ya que participo una vez a la semana y es mas facil hacer en un dia o dos las cuatro entradas que estar pendiente todas las semanas, ya que se te puede pasar.
  • Enlace permanente: Es el enlace de la entrada puedes ponerlo automaticamente o personalizar tu enlace, depende de lo que quieras.
  • Ubicación: De donde públicas yo no lo tengo puesto, es la localidad o sitio donde publicas.
  • Opciones: Hay varias opciones permitir los comentarios o no, la forma de redacción y personalizar los saltos de linea 

      Creo que hasta aquí esta todo mas  o menos lo que te puedes encontrar en la entrada de tu post, iremos aprendiendo poco a poco cada uno de los apartados.

       Que paseis un buen día








Publicado por en No hay comentarios:
Etiquetas: ,

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.


Publicado por en No hay comentarios:
Etiquetas: , ,
Suscribirse a: Entradas (Atom)