Que es HTML
HTML, es un lenguaje de programacion, el cual podemos crear una pagina web a partir de etiquetas
-
-
Enter Slide 2 Title Here
This is slide 2 description. Go to Edit HTML and replace this your own description. -
Enter Slide 3 Title Here
This is slide 3 description. Go to Edit HTML and replace this your own description. -
Enter Slide 4 Title Here
This is slide 4 description. Go to Edit HTML and replace this your own description.
lunes, 20 de enero de 2014
domingo, 4 de agosto de 2013
Hoy veremos los fondos html parte 2, en nuestra primera parte observamos como poner fondos a través de colores en ingles y valores RGB. En esta parte observaremos como poner una imagen de fondo:
A diferencia de los fondos: En html se usa la etiqueta bgcolor ya vista para poner color de fondo y para imágenes usamos la etiqueta "background" que su significado en español es "fondos".
Su etiqueta al igual que bgcolor es insertada mediante "body" luego se pondrá el signo igual y un par de comillas de tal forma debe quedar así:
<body background="">
en medio de las comillas debemos poner la ruta de la imagen en mi caso se llama ejemplo.jpg y al estar en el mismo lugar del archivo html me quedara de esta forma:
<body background="ejemplo.jpg">
el resultado de mi ejemplo fue este:
Es igual la etiqueta, para insertar fondo desde la web, lo único que cambia es la ruta debemos colocar el enlace completo de una imagen por ejemplo
http://www.ociomotor.com/wp-content/uploads/2012/11/Need-For-Speed-Most-Wanted-2012-Logo.jpeg
en medio de las comillas pegamos el enlace de la imagen y ya nos quedara.
martes, 16 de julio de 2013
Hoy aprenderemos a poner fondos en html.
Los fondos en html se les da el valor dentro de la etiqueta <body> es decir sera dado en el cuerpo de la pagina.
En html para poner un fondo de un color en especifico utilizamos bgcolor luego hacemos el signo igual seguido de dos comillas de esta forma(bgcolor="") en medio de las comillas tenemos dos opciones
- Valor RGB Tabla colores RGB
- Color en ingles
<body bgcolor="#2EFEF7">
Henos elegido que el color de fondo sea un azul aguamarina (cyan).
Ejemplo:
<html>
<head>
<title> Ejemplo fondo </title>
</head>
<body bgcolor="#2EFEF7">
Podemos observar el color de fondo por un valor RGB aquí
</body>
</html>
Podemos observar el fondo:
En color en ingles es muy similar la diferencia es que no se aplica un valor en codigo sino un color por ejemplo gray la etiqueta no cambia mucho queda de esta forma
<body bgcolor="gray">
Henos elegido que el color de fondo sea gris:
<html>
<head>
<title> Ejemplo fondo </title>
</head>
<body bgcolor="gray">
Podemos observar el color de fondo por un valor COLOR EN INGLES aquí
</body>
</html>
Podemos observar el fondo:
Hasta aquí llego la primera parte en la próxima veremos como poner imagenes como fondo.
martes, 2 de julio de 2013
Hoy aprenderemos etiquetas básicas de html serán:
<br> Sirve para agregar un espacio en html no nos reconoce los espacios con un simple enter debemos importar la etiqueta.
un ejemplo:
<html>
<head>
<title>
ejemplo
</title>
</head>
<body bgcolor="black" text="red">
<h3>Este es un ejemplo...
Henos realizado espacios con enter pero como observamos no nos lo reconocé.
</h3>
</body>
</html>
El resultado:
.png)
con br hara un espacio justo después de la palabra ejemplo...
<html><head>
<title>
ejemplo
</title>
</head>
<body bgcolor="black" text="red">
<h3>Este es un ejemplo... <br> Realizamos espacios con br mas no con enter, ya podemos observar el espacio.
</h3>
</body>
</html>
Resultado:
<h1><h2><h3><h4><h5><h6>
</h1></h2></h3></h4></h5></h6>
Son etiquetas de tamaño van de mas grande a la menor h1 es la mas grande a diferencia de h6 que es la mas pequeña.
.png)
<b><i><u>
</b></i></u>
Son etiquetas para determinar letra "negrilla, cursiva y subrayado" con su respectiva etiqueta de cierre.
<p></p> Esta etiqueta se usa para determinar un parrafo en especifico.
PODEMOS OBSERVAR UN EJEMPLO DE TIPOS DE LETRAS Y PARRAFOS:
<center></center>
Etiquetas determinan la alineacion del texto, en este caso veremos alineacion al centro.
Un ejemplo:
NOTA: Tambien pueden alinearloc omo deseen solo remplazan center por derecha o izquierda recuerda que la palabra debe estar en ingles.
Ahora veremos un ejemplo uniendo todas las etiquetas vistas:
domingo, 23 de junio de 2013
En nuestras 2 partes de imágenes en html, aprendimos como insertar imágenes en html a través de una imagen alojada en nuestra PC ó en Internet, en esta parte veremos con cambiar el tamaño de las imágenes
como ejemplo mostrare esta imagen con su tamaño original.
podemos observar que la imagen es muy grande y ocupa toda la pantalla lo que haremos es reducir sus tamaños en html se manejan dos palabras que vienen del idioma ingles
WEIDTH = Ancho de la imagen que queremos otorgar
HEIGHT = Alto de la imagen que queremos otorgar
la etiqueta de la imagen es:
<img src="http://img1.meristation.com/files/imagenes/reportajes/wii/2013/10_anos_de_call_of_duty/call-of-duty-4.jpeg">
ahora agregaremos las 2 palabras (weidth y height) en la etiqueta seguido de el signo igual (=) y un par de comillas ("") de tal manera que quede así
<img src="http://img1.meristation.com/files/imagenes/reportajes/wii/2013/10_anos_de_call_of_duty/call-of-duty-4.jpeg" weidht="" height="">
En la mitad de las comillas agregaremos los tamaños que queremos podemos agregar en pixeles (px) ejemplo
<img src="http://img1.meristation.com/files/imagenes/reportajes/wii/2013/10_anos_de_call_of_duty/call-of-duty-4.jpeg" weidht="300px" height="300px">
los tamaños ya cambiaron ahora debe de visualizarse de esta forma:
lunes, 17 de junio de 2013
En nuestro Tutorial parte 1 observamos el ejemplo de como añadir imágenes desde la web, ahora observaremos como añadirlas desde nuestro ordenador
Ejemplo #2 Imágenes desde ordenador
Tendré en una carpeta en el escritorio de mi PC, la cual la llamare autos dentro de esta carpeta pondré una imagen la cual la llamare tunning,
primero: Agregar la estructura básica HTML, agregar un espacio
<html>
<head>
<title>
</title>
</head>
<body>
Espacio agregado
</body>
</html>
En el espacio agregado agregaremos la etiqueta
<img src="">
a diferencia de nuestra otra lección esta vez agregaremos como ruta la de nuestro ordenador para encontrar esta ruta
damos a la imagen clic derecho → propiedades nos dará un cuadro así clic en propiedades
<img src="">
a diferencia de nuestra otra lección esta vez agregaremos como ruta la de nuestro ordenador para encontrar esta ruta
damos a la imagen clic derecho → propiedades nos dará un cuadro así clic en propiedades
nos mostrara un cuadro así, debemos, copiar la ruta
en mi caso la ruta es:
C:\Documents and Settings\Administrador\Escritorio\autos
en la ultima palabra agregaremos este signo "\" cuando agreguemos ese signo debemos poner el nombre que tenemos la imagen en mi caso la imagen se llama
Tunning.jpg
nos debe quedar así:
C:\Documents and Settings\Administrador\Escritorio\autos\Tunning.jpg
ahora nuestra etiqueta de imagen queda asi:
<img src="C:\Documents and Settings\Administrador\Escritorio\autos\Tunning.jpg"></img>
la imagen en la estructura html
<html>
<head>
<title>
creando
creando
</title>
</head>
<body>
<img src="C:\Documents and Settings\Administrador\Escritorio\autos\Tunning.jpg"></img>
</body>
</html>
se vera en el navegador así:
lunes, 10 de junio de 2013
Las imágenes en HTML se insertan a través de la etiqueta <img> (que nos indica que se va a agregar una imagen), dentro de la etiqueta <img> agregaremos "src· que indica que sera la ruta de una imagen ya sea que este en Internet o en nuestro ordenador. De momento nuestra etiqueta debe quedar de esta forma
<img src>
Al lado de src se agregara el signo igual = y se agregaran un par de comillas "". De momento nuestra etiqueta debe quedar así:
<img src="">
en el medio de las comillas debemos agregar la ruta de una imagen ya sea que este en Internet o en nuestro navegador veremos 2 ejemplos.
Ejemplo nº 1 IMÁGENES DE INTERNET
:Para poner una imagen en nuestro documento HTML que se encuentra en Internetprimero: Buscamos la imagen que necesitemos en Internet.
segundo: Copiamos el link de la imagen para esto debemos
- Clic derecho en la imagen
- Se abre un cuadro buscamos donde dice "copiar "url de imagen" un ejemplo en Google chorme
- Asegurarse que al pegar este http://
- Entre las comillas agregar el link debe quedar de esta forma nuestra etiqueta
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaIR2qSkc0kmU_DoWsFY1W-PtKmXHuG0v5-5P_TsShHePEtXdANI4eyl6gQqRqr__rYcCIi6BvcAkrD6fukHQnu6HmiQBiexG0ZkrbMPKIqoehRcFETzJoURqqqvsDPtM0vxGZPLR9D0wZ/s1600/naruto+shippuden+kyuubi.jpg">
Nota2: Recuerda que debes antes hacer la estructura básica de HTML entre <body> y </body> agregaras un espacio donde debe ir la etiqueta de imagen de esta forma
<html>
<head>
<title>
pagina web
</title>
</head>
<body>
Espacio agregado
</body>
</html>
En el espacio pones la etiqueta de imagen, luego la cierras de esta manera </img>. Nos debe quedar de esta forma.
<html>
<head>
<title>
pagina web
</title>
</head>
<body>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaIR2qSkc0kmU_DoWsFY1W-PtKmXHuG0v5-5P_TsShHePEtXdANI4eyl6gQqRqr__rYcCIi6BvcAkrD6fukHQnu6HmiQBiexG0ZkrbMPKIqoehRcFETzJoURqqqvsDPtM0vxGZPLR9D0wZ/s1600/naruto+shippuden+kyuubi.jpg"></img>
</body>
</html>
Guardas todo en formato HTML
y en nuestro navegador se vera:
segundo ejemplo de como insertar HTML en imágenes de nuestro ordenador en la siguiente clase
NOTA: Recuerda usar bloc de notas o notepad++ si no lot ienes clickea aqui Notepad++ para tu PC sirve para programar en HTML y CSS.
Suscribirse a:
Entradas (Atom)
