comment
IRC Chat
play_arrow
Este sitio utiliza cookies propias y de terceros. Si continúa navegando consideramos que acepta el uso de cookies. OK Más Información.

[HTML] Curso HTML desde cero

  • 0 Respuestas
  • 1139 Vistas

0 Usuarios y 1 Visitante están viendo este tema.

Conectado ANTRAX

  • *
  • Administrator
  • Mensajes: 5396
  • Actividad:
    36.67%
  • Reputación 31
  • ANTRAX
    • Ver Perfil
    • Underc0de
    • Email
  • Skype: underc0de.org
  • Twitter: @Underc0de
« en: Febrero 24, 2010, 11:50:54 am »
CURSO HTML DESDE CERO BY V4NDID4


Hola a todos, Bueno voy a hacer un tutorial, de html que fue lo primero que aprendi xD, Espero que lo puedan entender, es muy facil el html y se
pueden hacer paginas webs completas =D.


===============================================================================================================
                                                              ******************** COMENZEMOS**********************
===============================================================================================================


¿Qué es el HTML?

HTML, siglas de HyperText Markup Language (Lenguaje de Marcas de Hipertexto), es el lenguaje de marcado predominante para la construcción de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes.
HTML se escribe en forma de "etiquetas", rodeadas por corchetes angulares (<,>).
HTML también puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo Javascript), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML.



¿Para que sirve?

Sirve como bien algo se dijo arriba, para el Diseño de Paginas Webs   ;D


--------------------------------------------------------------------------------------------------------------------------------------------------------------------

Todas las paginas webs en HTML comienzan y terminan con esto:  <html> </html>

Todas las etiqueras de cierre tienen esto ''/''

Esta es la estructura de una pagina web en HTML:

<html>
  <head>
  </head>
  <body>
  </body>
</html>


Despues tenemos la etiqueta title: <title> el titulo de nuestra web</title>

Esas son las cosas mas basicas.


--------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Los Titulos:

Las etiquetas de los titulos son: <h></h> pero tienen algo de especial, es que, varian del 1 al 6, osea.... 1 al 6 en tamaño

<h1>TITULO EXTRA GRANDE</h1>
<h2>titulo grande</h2>
<h3>titulo mediano-grande<h3>
<h4>titulo mediano</h4>
<h5>titulo chico</h5>
<h6>titulo chiquitito</h6>

Les dejo una imagen para que lo vean con mas detalle =D




--------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Poniendo Parrafos en nuestra web:

Las etiquetas de los parrafos son <p> </p>
Por ejemplo un parrafo seria algo asi:  <p> Hola a todos soy v4ndid4 y estoy haciendo este tuto para todos aquellos de E-R00T que les intereze HTML </P>


----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Los enlaces:

Los enlaces se ponen asi: <a href=''No tienes permisos para ver links. Registrate o Entra con tu cuenta''>v4ndid4</a> ese seria un ejemplo,
lo que se veria en nuestra pagina web seria la palabra: v4ndid4 y al darle click ahy nos llevaria a No tienes permisos para ver links. Registrate o Entra con tu cuenta

Muchas veces queremos que los enlaces se abran en otra ventana, para eso tenemos que agregarle esto:  target="_blank"
de manera que el codigo quede asi: <a href=''No tienes permisos para ver links. Registrate o Entra con tu cuenta'' target="_blank">v4ndid4</a>

Enlace de E-MAIL: <a href="v4ndid4@e-r00t.org">loque qeres que se vea en lugar de tu mail o puede ser tu mal XD</a>


--------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Diferentes estilos para los textos y palabras

Por ejemplo si ponemos un texto o palabra  entre las etiqueras <b></b> vamos a obtener un resultado asi: Negrita

En cambio si ponemos un texto o palabra entre las etiquetas <i></i> vamos a obtener un resultado asi: Cursiva

Masss.... si ponemos texto o palabra entre las etiquetas <u></u> vamos a tener un resultado asi: subrayado


---------------------------------------------------------------------------------------------------------------------------------------------------------------------------

El fondo:

Para poner un color de fondo en la pagina web tenemos que dejar la etiqueta <body> de la siguiente forma:

<body bgcolor="#0000FF">

bgcolor significa ''color de fondo''
y #0000ff  viene a ser el color en este caso ese codigo corresponde al color azul.


Acá les dejo los codigos de los colores mas comunes:

Negro: #000000
Gris: #666666
Blanco: #FFFFFF
Rojo: #FF0000
Verde: #00FF00
Azul: #0000FF
Amarillo: #FFFF00
Celeste: #00FFFF
Rosa:#FF00FF
Naranja: #FFCC00
Marron: #663300
Violeta: #8000FF

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Insertando imagenes en la web

<img src="ruta/imagen.gif" width="medidapx" height="medidapx" alt="descripcion de la imagen">

Bueno ese es el codigo para insertar una imagen, lo voy a explicar:

donde dice ''ruta'' seria la ubicacion de la imagen en nuestra pc.
luego vienen las medidas de la imagen en pixeles
y luego ese cartelito chiquito que parece cuando pones el cursor sobre la imagen =D






---------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Creando simples Menus

Esto puede ser un simple menu:

<ul>
<li>loqueqieras1</li>
<li>loqueqieras2</li>
<li>asisucesivamente</li>
</ul>


la etiqueta <li></li> viene de lista, lo que creamos ahy es una lista y las etiquetas: <ul></ul> marcan el comienzo y el fin de las listas.

con eso obtendremos algo asi:



y luego podemos hacer que esas palabras se conviertan en enlaces dejando el codigo asi:

<ul>
<li><a href="#">loquequieras1</a></li>
<li><a href="#">loquequieras2</a></li>
<li><a href="#">asisucesivamente</a></li>
</ul>


NOTA: Cabe destacar que se pueden agregar cuantos kieran XD ((por las dudas))


-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------


Bueno con todo lo que les enseñé ya podrian ser capaces de hacer algo como esto:




Creando un trozo de codigo HTML como este:

Código: HTML5
  1. <No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  2. <No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  3. <No tienes permisos para ver links. Registrate o Entra con tu cuenta>Curso de HTML completo para E-R00T by V4NDID4</No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  4. <No tienes permisos para ver links. Registrate o Entra con tu cuenta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  6. </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  7. <No tienes permisos para ver links. Registrate o Entra con tu cuenta bgcolor="#666666">
  8. <No tienes permisos para ver links. Registrate o Entra con tu cuenta class="Estilo1">Curso de html desde cero by V4NDID4</No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  9.  
  10. <No tienes permisos para ver links. Registrate o Entra con tu cuenta>Bueno espero que les halla gustado este tutorial o manual que hise para E-ROOT, para aquellos que les intereze el diseño web, el lenguaje HTML.
  11.   Me llevo bastante tiempo hacerlo, porque no me convencia como quedaba XD
  12. entonces lo borraba y lo volvia a escribir</No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  13. <No tienes permisos para ver links. Registrate o Entra con tu cuenta>Menu:</No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  14. <No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  15. <No tienes permisos para ver links. Registrate o Entra con tu cuenta>E-R00T</No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  16. <No tienes permisos para ver links. Registrate o Entra con tu cuenta>V4NDID4</No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  17. <No tienes permisos para ver links. Registrate o Entra con tu cuenta>HTML</No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  18. <No tienes permisos para ver links. Registrate o Entra con tu cuenta>lo que quierann!!!</No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  19. </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  20.  
  21. <No tienes permisos para ver links. Registrate o Entra con tu cuenta>Saludos</No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  22. <No tienes permisos para ver links. Registrate o Entra con tu cuenta>Un saludo para todos mis amigos de E-R00T =D
  23. Nida para nombrar a todos XD asi que hago un saludo general =P
  24. Beso ;) y espero que les sirva esto.</No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  25.  
  26. <No tienes permisos para ver links. Registrate o Entra con tu cuenta><No tienes permisos para ver links. Registrate o Entra con tu cuenta src="http://hosting.deimagenes.com/imagenes/d4bf95b3ee238a2697e3578acc2fa110.gif" width="60px" height="60px" alt="V4NDID4"></No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  27.  
  28. <No tienes permisos para ver links. Registrate o Entra con tu cuenta>&nbsp;</No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  29. <No tienes permisos para ver links. Registrate o Entra con tu cuenta>&nbsp;</No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  30. </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  31. </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  32.  

Un saludo para todos

« Última modificación: Mayo 02, 2014, 10:22:59 pm por Destructor.cs »


 

¿Te gustó el post? COMPARTILO!



Curso Desarrollo Web con Spring 4 [Aprender desarrollo web Spring Framework]

Iniciado por Mr.Kratos

Respuestas: 0
Vistas: 171
Último mensaje Julio 30, 2018, 08:07:05 pm
por Mr.Kratos
[JavaScript][AVANZADO] Trabajar con DOM desde Firefox e Internet Explorer

Iniciado por arthusu

Respuestas: 0
Vistas: 1563
Último mensaje Julio 16, 2011, 07:05:12 pm
por arthusu
Compartiendo Recursos mediante WebDav desde el Cpanel.

Iniciado por xyz

Respuestas: 0
Vistas: 477
Último mensaje Enero 20, 2018, 04:00:38 pm
por xyz
Curso: [Academia WordPress 2016] [Aprende A Crear Sitiros Web De Verdad]

Iniciado por Mr.Kratos

Respuestas: 0
Vistas: 167
Último mensaje Julio 21, 2018, 04:24:05 pm
por Mr.Kratos
Personalizar error 404 desde FTP

Iniciado por ANTRAX

Respuestas: 0
Vistas: 1558
Último mensaje Febrero 24, 2010, 12:03:13 pm
por ANTRAX