Para empezar en HTML, tenemos que empezar por lo básico, primero tenemos que abrir un documento, y cambiarle la extensión de ".txt" a ".html".
Una vez hemos echo esto, abrimos el documento para editarlo, y ponemos:
<!DOCTYPE html>
<html>
<head>
<title> Hola esto es una prueba </title>
</head>
<body>
<p> hola <strong> que tal? </strong> </p>
<hr />
<p> ir a <a href="http://www.google.com"> Google </a> </p>
</body>
</html>
Primero de todo, tenemos que poner "!DOCTYOE", el !DOCTYPE es para indicar que estamos en HTML5.
Luego, para empezar con muestra página web, abrimos, como en el ejemplo de arriba, <html>, la cual, nos indica que es una página web, y va al principio. Para que luego no se nos olvide cerrarlo, ponemos unos cuanto espacios mas abajo </html>.
A continuación, ponemos el comando de <head> es un título, el cual sale en la pestaña que se abre cuando abrimos el documento en el navegador para ver el resultado. Al igual que el <html>, tenemos que cerrar el head, tal que asi: </head>.
Ahora, abrimos un <body>, en esta parte aparecerá todo el contenido de la página web que deseamos mostrar; para poner un parrafo, tenemos que poner un <p>, y todo lo que ponemos ahi dentro, será un parrafo, y para cerrarlo, basta con hacer como en los demas, </p>; así ya tendríamos un parrafo de nuesta página.
Ahora, para resaltar una parte de nuestro texto, basta con poner <strong> antes del texto a resaltar (eso si, dentro del <p>) y lo cerraremos donde queramos dejar de resaltar el texto, con un </strong> (eso si, hay que cerrarlo antes del </p>).
Para que haya una separación entre parrafos, basta con poner <hr />, y se creará una línea blanca entre el párrafo anterior y el siguiente.
Pero, en cambio, si en lugar de que sea una línea blanca, quieres que sea una línea, el comando se sustituye por <br />.
En ninguno de los anteriores casos hace falta cerrarlos, porque como podemos ver, ya tenemos la / que nos lo indica en el mismo comando.
Para poner un hipervínculo en una palabra, tenemos que poner <a href="el enlace que se quiera"> (palabra o frase para hacer el hipervinculo), y para cerrarlo, basta con poner </a> al final de este.
Como, por ejemplo, <a href="www.google.com"> ir a google </a>.
Para intertar una imagen, tenemos que poner <img src="y el nombre de la imagen" />, por ejemplo, <img src="keyboard.jpg" />; en este caso, la foto ha de estar en la misma carpeta que el documento html que estamos creando; o podemos poner un enlace cogido de internet para la imagen. Este comando tampoco hace falta que se cierre, ya que tiene la "/" en él mismo.
Para poder modificar el tamaño de la imagen, a continuación del enlace o del nombre de la fotografía, tenemos que poner widht="xxxx" heigt="xxx", para modificar el ancho y el alto de esta.
Todo el comando junto, (el anterior y este) se quedaría tal que asi: <img scr="keyborard.jpg" width="150" height="100" />
También podemos variar el tamaño de la letra, poniendo <h1> y el texto que queramos, y cerrando con </h1>. Estos tamaños pueden ir variando desde h1 hasta h6, donde h1 es el tamaño más grande, y h6 el más pequeño. (Cabe aclarar que el hx va dentro del de "p", y se cierra antes de este, es decir:
<p><h1> el texto que queramos </h1></p>).
Podemos poner una cabecera y un pie de página en nuestra página web, para ello, usamos el comando <header> y el texto que queramos poner en la cabezera, y </header> para cerrar su contenido.
Ahora, para poner el pie de página, usamos el <footer>, el texto que queramos, y </footer> para cerrarlo.
martes, abril 7
domingo, abril 10
Poner un menú
En esta nueva entrada, vamos a poner un menú en nuestra página web. para ello, necesitamos el comando <nav>, el cual nos indica que es un menú, al cual le podemos poner un título, en mi caso, he usado el <h1> para que el tamaño de la letra sea grande, pero podemos usar cualquiera, desde h1 hasta h6.
Ahora, para abrir el menú, tenemos que poner <ul>, debajo de este, crearemos la lista, pero esta no se ordenará alfabeticamente, si no que aparecerá en el orden que nosotros le pongamos.
Una vez hemos puesto el "ul", tenemos que poner <li>, el cual sirve para poner el nombre del elemento que saldrá en el menú que estamos creando.
Por cada elemento que queramos poner, tenemos que poner <li> el nombre de este y </li> para cerrarlo; para poner otro elemento, basta con poner una linea debajo de este con el enter, y repetir la operación anterior.
Una vez tengamos todas los elementos puestos, y debidamente cerrados, tenemos que acordarnos de cerrar el menú con el </ul> que hemos puesto al principio si "/" para abrirlo; y también, tenemos que acordarnos de cerrar el </nav> que ha sido lo primero que memos puesto para abrir este menú, pero sin la "/", que nos definia las partes del menú.
Ahora vamos a ver un ejemplo de como poner todos los comandos para hacer el menú:
<nav>
<h1> Artistas </h1>
<ul>
<li> Adele </li>
<li> Jasmine Thompson </li>
<li> Meghan Trainor </li>
<li> Calvin Harris </li>
</ul>
</nav>
Ahora, para abrir el menú, tenemos que poner <ul>, debajo de este, crearemos la lista, pero esta no se ordenará alfabeticamente, si no que aparecerá en el orden que nosotros le pongamos.
Una vez hemos puesto el "ul", tenemos que poner <li>, el cual sirve para poner el nombre del elemento que saldrá en el menú que estamos creando.
Por cada elemento que queramos poner, tenemos que poner <li> el nombre de este y </li> para cerrarlo; para poner otro elemento, basta con poner una linea debajo de este con el enter, y repetir la operación anterior.
Una vez tengamos todas los elementos puestos, y debidamente cerrados, tenemos que acordarnos de cerrar el menú con el </ul> que hemos puesto al principio si "/" para abrirlo; y también, tenemos que acordarnos de cerrar el </nav> que ha sido lo primero que memos puesto para abrir este menú, pero sin la "/", que nos definia las partes del menú.
Ahora vamos a ver un ejemplo de como poner todos los comandos para hacer el menú:
<nav>
<h1> Artistas </h1>
<ul>
<li> Adele </li>
<li> Jasmine Thompson </li>
<li> Meghan Trainor </li>
<li> Calvin Harris </li>
</ul>
</nav>
Tambien, podemos poner enlaces en cada elemento, para ello, necesitamos usar el siguiente comando:
<a href="el enlace" > la palabra </a> .
Por lo tanto, para poner el enlace en el menú, tenemos que poner:
<li> <a href="el enlace"> Adele </a> </li>
Por lo tanto, para poner el enlace en el menú, tenemos que poner:
<li> <a href="el enlace"> Adele </a> </li>
Suscribirse a:
Entradas (Atom)