|
|
 |
 |
 |
| HTML: Guía rápida. Aprende html en diez minutos. |
Esta guía es una introducción al lenguaje más importante en Internet el HTML (hyper text markup language). Los ejercicios empleados en este manual usan HTML muy básico y práctico para que puedas crear tu primera página web de la manera más rápida. |
|
|
|
| |
| |
|
| Introducción |
Esta guía es una introducción al lenguaje más importante en Internet el HTML (hyper text markup language). Gracias al HTML podrás crear documentos que puedan ser vistos en Internet llegando así a millones de personas en todo el mundo.
En su forma más básica y práctica, el HTML es muy sencillo y fácil de aprender. Todo lo que tienes que hacer es memorizar etiquetas específicas y comprender su significado.
Por ejemplo para conseguir que una palabra o frase aparezca resaltado en negrita debes poner la etiqueta <strong> antes de la palabra y la etiqueta </strong> al final.
Ejemplo:
<strong> Hola </strong>
|
|
Programas editores de HTML |
La popularidad del HTML ha promovido el desarrollo de diversos programas de edición de código HTML, que permiten realizar páginas web sin saber nada de HTML ya que el programa traducirá automáticamente a HTML, insertando las etiquetas requeridas. Estos programas se conocen como editores WYSIWYG o what you see is what you get (lo que ves es lo que obtienes). Dos de los editores WYSIWYG mas populares son Microsoft Frontpage y Macromedia dreamweaver.
Resulta de gran ayuda dominar HTML básico aunque utilices algún programa WYSIWYG. El conocimiento de las etiquetas y los comandos más básicos te ayudara a comprender el funcionamiento de la web y solucionar posibles errores.
|
|
Escribe tu primera página en HTML |
1, Para realizar nuestra pagina vamos a usar el bloc de notas, programa que viene por defecto al instalar Windows. Para acceder al bloc de notas, si tienes Windows xp debes ir primero a inicio, todos los programas, accesorios, bloc de notas.
2. Escribe el siguiente texto tal cual esta escrito:
<html>
<body>
<head>
<title> Mi compañía s.a. </title>
</head>
<body>
<h1> Bienvenidos a mi pagina web </h1>
<br>
Mi compañía se especializa en el diseño de páginas web.
</body>
</html>
3. Guarda el texto que acabas de escribir como empresa1.htm. Es importante que añadas .htm ya que si no se guardara por defecto como un documento de texto .txt
4. Enhorabuena, acabas de crear tu primera página web llamada Empresa1.htm. Para ver tu página puedes usar cualquier navegador web como Internet Explorer.
|
|
| Nociones básicas |
El objetivo de este manual es enseñarte a crear páginas web simples usando HTML básico. HTML es el acrónimo en ingles de hypertext markup language (lenguaje de marcas hipertextuales). Es el lenguaje usado para crear documentos que puedan ser vistos en Internet.
El HTML esta compuesto de etiquetas que consisten en breves instrucciones mediante las cuales se determina la forma en la que aparecerá el texto y los gráficos creados en la pantalla del ordenador vía Internet.
Todas las etiquetas están incluidas entre los signos menor < y mayor >
Ejemplo: <body>
Todas las etiquetas deben cerrarse al terminar la orden. Para ello ponemos el símbolo / antes de la palabra incluida entre < y >
Ejemplo: </body>
Los ejercicios empleados en este manual usan HTML muy básico y práctico para que puedas crear tu primera página web de la manera más rápida.
|
|
Etiquetas básicas de HTML |
- <html> </html>
Todos los documentos HTML deben empezar y acabar con esta etiqueta.
- <head> <head/>
Cabecera del documento HTML. Contiene información básica sobre la página.
- <title> </title>
Titulo de la página que aparecerá en la barra de titulo encima de la ventana. Debe ir incluido entre las etiquetas <head> </head>.
- <body> </body>
Contiene toda la información propia del documento que queremos que se visualice en el navegador (texto, gráficos, formularios, etc.).
- <h1> </h1>
Encabezado o titulo con un tamaño de aproximadamente 24 puntos. Existen 6 tipos de encabezado <h1> >h2>…..<h6>. <h1> es el de mayor tamaño, <h6> es el mas pequeño con aproximadamente 8 puntos.
- <strong> </strong>
Resalta el texto en negrita.
- <em> </em>
Convierte el texto en cursiva, puede combinarse con el atributo <strong> para escribir texto en cursiva y negrita.
<strong> <em> el texto aparece en negrita y cursiva </strong> </em>
- <ul> </ul>
Indica el comienzo y el final de una lista. Cada elemento de la lista se indica con la etiqueta <li>.
- <br>
Salto de línea forzado.
- <p> </p>
Provoca una separación de dos espacios entre cada bloque de texto creando un párrafo nuevo.
|
|
|
| Crea tu segunda página en HTML |
<html>
<body>
<head>
<title> Nombre del producto </title>
</head>
<body>
<h1> Ahorra mucho dinero con este increíble producto </h1>
<h4> El mejor producto que nunca encontrara </h4>
<br>
Deja de buscar. Mi producto te solucionara todos tus problemas. El mejor producto que puedes comprar al mejor precio. Tan solo cuesta <strong> la mitad </strong> de lo que cuestan otros productos similares. <p>
Beneficios del producto:<ul>
<li> Puedes usarlo por la mañana </li>
<li> Puedes usarlo por la noche </li>
<li> Puedes usarlo los días lluviosos </li>
<li> Puedes usarlo los días soleados </li>
</ul> <br>
Mi producto ha sido escogido como <em> producto del año </em> por la revista del consumidor. <p>
¡No esperes mas! Compra mi producto ahora.
</body>
</html>
Guarda la pagina como producto1.htm en el bloc de notas.
|
|
Añade gráficos e hipervínculos a tu página |
Con HTML podrás añadir gráficos e hipervínculos a otras páginas o documentos fácilmente consiguiendo que vuestra página sea mucho más atractiva e interactiva.
Gráficos
La etiqueta necesaria para insertar gráficos en una pagina es <img=src…..>
Ejemplo:
<img=srchttp://www.enlared.biz/imagenes2/welcomecomp.jpg>
así indicamos al navegador que debe mostrar el grafico welcomecomp.jpg guardado en el directorio imagenes2 del dominio enlared.biz
Hipervínculos
Para incluir hipervínculos en tu web debes insertar la etiqueta <a herf=…..> </a>
En los puntos suspensivos debes indicar la dirección url del documento al que quieres acceder al hacer clic sobre el link. Si quieres poner un texto especifico que describa el link y será el que lean los usuarios debes situarlo entre > y </a> justo antes del cierre de la etiqueta.
Ejemplo:
<a herf=http//www.enlared.biz>Gana dinero con Internet<a/>
Cuando alguien cliquee sobre las palabras gana dinero con Internet automáticamente será redireccionado a la pagina htttp://www.enlared.biz
|
|
| VINCULOS PATROCINADOS |
| |
|
|
| |
| |
| |
|
|
| |
|
|
 |
 |
|
|
 |
 |
| |
|
 |
| » Dinero |
|
| » Programas gratis |
|
| » Intercambio de Links |
|
» RSS  |
|
» Directorio
Añade tu web a nuestro directorio |
|
» Directorio de artículos
Promociona tu web y consigue artículos gratis |
|
» Promoción web - SEO
Manuales, trucos y programas gratuitos para conseguir más visitas |
|
» Alojamiento web
Alojamiento web gratis |
|
» Antivirus
Descargar antivirus, cortafuegos, antispyware gratis |
|
» Clientes de correo
Los mejores programas gratuitos para leer tu email |
|
» eMail
Cuentas de correo electrónico gratis |
|
» Messsenger - Chats
Los mejores programas de mensajería y chat. Extras para Messenger |
|
» Audio - Música
Utilidades MP3, música gratis, radios online... |
|
» Vídeo - DvD
DVD, Divx, YouTube, televisión gratis online.. |
|
» Navegadores web
Los mejores navegadores y extensiones gratis para Internet Explorer, Opera, Mozilla Firefox... |
|
» Utilidades - pc
Los mejores programas gratis para tu ordenador |
|
» Utilidades - web
Blogs, skype, vídeos.. las mejores utilidades gratis de Internet |
|
» P2P - Descargas
Intercambio de archivos P2P. Encuentra y descarga todo tipo de ficheros. |
|
» Manuales y cursos
Manuales y cursos gratis online |
|
» Webmasters
Programas gratis de diseño y creación de páginas web. |
| |
» Blogs
Herramientas gratuitas para crear y promocionar tu propio blog |
|
» Ocio
Viajes, juegos, deportes, relaciones .. La mejor oferta de ocio en la red |
|
» Móviles
Programas, accesorios y juegos gratis para todo tipo de móviles |
|
» Personalizar Windows
Fondos, temas, skins, cursores, iconos, fuentes, salvapantallas.. |
|
» Diseño y fotografía
Todo tipo de recursos y programas gratis para tus imágenes |
|
» Conexión a Internet
ADSL, WiFi... Conexión a Internet gratis |
|
» Redes sociales
Redes sociales para conocer gente: Tuenti, MySpace, Facebook, Badoo, Hi5 ... |
|
» Facebook
Trucos, como crear páginas, aplicaciones gratis, juegos para facebook y más. |
|
» Noticias
Toda la actualidad nacional e internacional |
|
» Salud
Programas gratis para cuidar tu salud y relajarte en el trabajo |
|
» Juegos
Juegos gratis online |
|
» Viajes
Mapas, guías, vuelos baratos, agencias, descuentos ... |
|
» Estudiantes
Recursos gratis para estudiantes: apuntes, trabajos, chuletas .. |
|
» Pasatiempos
Tómate un desccanso en el trabajo |
|
» Idiomas
Cursos gratis de inglés, francés, alemán, chino.. |
|
» Consultas online
Consultas profesionales gratis, enciclopedias, noticias, mapas, guías, buscadores ... |
|
» Ofimática
Procesadores de texto, bases de datos, hojas de cálculo - Programas gratis |
|
» Libros - eBooks
Libros y audiolibros gratis, bibliotecas virtuales, comunidades online, catalogadores ... |
|
» Linux
Descargas y recursos gratis |
|
» Medios de comunicación
Radio, televisión, periódicos, revistas ... |
|
» Gestores de información
Agendas, calendarios, catalogadores... |
|
» Programación
Manuales y programas gratis |
|
» Outlets online
Coches, pisos, moda, electrodomésticos y más a precios de saldo |
|
» Buscadores
Encuentra todo lo que busques en Internet |
|
| |
|
|
| |
 |
| |
|
|
| |
|
| |
|
|
|
 |
|
|
|