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.
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.
domingo, 9 de junio de 2013
Lo mas básico en CSS, es su síntesis a continuacion veremos las diferencias de como se manejan los códigos en HTML y CSS.
* En CSS se manejan unas llaves en sus atributos "{}" a diferencia del HTML que se manejan flechas "<>"
* Los atributos que consten de mas de un termino se separan con punto y coma ";"
* En CSS se usan dos puntos ":" a diferencia del HTML donde se maneja el signo igual "="
* Los atributos compuesto por mas de un termino siempre se separan mediante un guion "-"
Un ejemplo de CSS muy simple es
* Usaremos la estructura básica de HTML
<html>
<head>
</head>
<body>
</body>
</html>
NOTA: en este ejemplo no agregare title pero si quieres un titulo de encabezado deberas agregarlo
* Entre <head> y </head> agregaremos un espacio y otro entre <body> y </body> de esta forma:
<html>
<head>
Espacio agregado
</head>
<body>
Espacio agregado
</body>
</html>
<style type="text/css">
esto nos indica que usaremos texto y css* Justo después de haber agregado la etiqueta <style type="text/css"> hacemos un espacio y agregaremos css.
<html>
<head>
<style type="text/css">
Nuevo espacio agregado
</head>
<body>
Espacio agregado
</body>
</html>
* En el nuevo espacio agregado usaremos css
primero: agregaremos H1, que en HTML es una etiqueta de tamaño de letra.
segundo: agregamos la llave abierta "{", que es la etiqueta que se usa en CSS
tercero: agregaremos una etiqueta que se usa en CSS que es font-family esta etiqueta se usa para elegir la fuente ejemplo "arial" una vez agregamos font-family lo separaremos por dos puntos ":" que en CSS son usados para determinar un valor o dar una opcion en especifica en este caso arial; Nos deberá quedar de momento de esta forma.
H1 { font-family:arial
cuarto: separaremos con punto y coma ":" (ya que usaremos otro termino pero con el mismo font) y pondremos color de la letra, para poner color en CSS se usa igual que en el Español escribimos después del punto y coma color agregamos dos puntos ya que daremos un valor a la propiedad color elegimos como ejemplo blue y cerramos las llaves "}" como resultado nos quedara de esta forma nos quedara de estaforma:
H1 { font-family:arial; color:blue }
en esta etiqueta indicamos que todas las etiquetas que lleven H1 tendrán como fuente arial y va a ser la letra de color azul ahora cerramos la etiqueta </style> y nos debe quedar al finalizar asi:
<style type="text/css">
H1 { font-family:arial; color:blue }
</style>
NOTA: ya agregamos css en el documento HTML
* Ahora usaremos el espacio entre la etiqueta <body y </body> hay agregaremos html.
<H1> Este texto se mostrara con letra de color azul y tipo de letra arial </H1>
NOTA: asiq uedara al finalizar todo:
<html>
<head>
<style type="text/css">
H1 { font-family:arial; color:blue }
</style>
</head>
<body>
<H1> Este texto es de color azul y como fuente arial </H1>
</body>
</html>
Así se visualizara en nuestro navegador:
sábado, 8 de junio de 2013
Notepad++, es un software gratuito que nos da la oportunidad de crear una web a HTML, podemos agregar estilos css, programar en otros lenguajes de programación.
cuenta con un buscador muy efectivo el cual nos ayudara a encontrar etiqueta o link de una manera muy rápida y efectiva, para que el buscador salga solamente debemos dar ctrl f
DESCARAGA NOTEPAD++
Notepad++ es de uso libre por lo cual lo podemos usar sin necesidad de licencia serial otro
asunto.
CSS, de sus siglas en ingles Cascading Style Sheets en español hojas de estilo en cascada, nos hace referencia por lo general a dar etilos a un documento HTML ó XHML con unas palabras referente al ingles.
También es usada con la etiqueta "<style> </style>".
A diferencia del HTML en CSS podemos darle estilos a varias cosas como la letra crear un menú desplegable y muchas otras cosas.
Es recomendable antes de aprender CSS saber HTML ya que CSS es algo similar a un complemento del HTML.
Hola.
HTML tiene una estructura que se compone por el idioma ingles y unas etiquetas
se usa las etiquetas
<html> </html> con etiqueta de cierre
<head> </head> con etiqueta de cierre
entre head se usa <title> </title> con etiqueta de cierre
<body> </body> con etiqueta de cierre
son las etiquetas mas básicas en html.
. La primera nos dice que nuestra web estará programada en HTML
. La segunda nos dice que con eso haremos un encabezado
. La tercera nos dice que nuestro encabezado sera el titulo
. La ultima es el cuerpo de nuestra pagina hay se agrega por lo general lo que queremos que aparezca en nuestra web, pero también hay cosas que van antes de aquella etiqueta.
El orden de las etiquetas son.
<html>
<head>
<title>
Aquí va el titulo de el encabezado
</title>
</head>
<body>
aquí va el contenido de nuestra pagina web
</body>
</html>
Esto es lo mas básico en HTML ah medida vamos aprendiendo agregar imágenes color etc.
viernes, 7 de junio de 2013
Html es un lenguaje de programación, el cual se utilizan etiquetas con las cuales podemos definir muchas cosas como color de letra, poner una imagen, texto centrado entre muchas otras cosas.
HTML de sus siglas en ingles HyperText Markup Language, al traducirlo es un lenguaje de marcado hipertextual, esto quiere decir que con este lenguaje puedes crear una pagina web a partir de etiquetas.
Suscribirse a:
Entradas (Atom)
