[HTML] Curso HTML desde cero

ANTRAX · 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

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

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 permitido ver los links. Registrarse o Entrar a mi 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 permitido ver los links. Registrarse o Entrar a mi 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 permitido ver los links. Registrarse o Entrar a mi cuenta'' target="_blank">v4ndid4</a>

Enlace de E-MAIL: <a href="[email protected]">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


<html>
<head>
<title>Curso de HTML completo para E-R00T by V4NDID4</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</style>
</head>
<body bgcolor="#666666">
<h1 class="Estilo1">Curso de html desde cero by V4NDID4</h1>

<p>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.
  Me llevo bastante tiempo hacerlo, porque no me convencia como quedaba XD
entonces lo borraba y lo volvia a escribir</p>
<h5>Menu:</h5>
<ul>
<li>E-R00T</li>
<li>V4NDID4</li>
<li>HTML</li>
<li>lo que quierann!!!</li>
</ul>

<h2>Saludos</h2>
<p>Un saludo para todos mis amigos de E-R00T =D
Nida para nombrar a todos XD asi que hago un saludo general =P
Beso ;) y espero que les sirva esto.</p>

<p><img src="http://hosting.deimagenes.com/imagenes/d4bf95b3ee238a2697e3578acc2fa110.gif" width="60px" height="60px" alt="V4NDID4"></p>

<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>

Un saludo para todos

patronux · Febrero 20, 2021, 12:04:38 PM

hola muchas gracias.
tengo una duda cuando lo guardo y despues lo reviso me abre en internet explorer como cambio eso?

DtxdF · Febrero 20, 2021, 12:20:24 PM

Hola @No tienes permitido ver los links. Registrarse o Entrar a mi cuenta

Acá te dejo el enlace de tu cuestión: No tienes permitido ver los links. Registrarse o Entrar a mi cuenta

Nota: mayormente al ejecutar un navegador (ya sea Firefox, Google Chrome, Edge, Opera, etc.) te pregunta si deseas colocarlo como predeterminado, en ese caso le das una respuesta afirmativa y se te coloca como tal.

~ DtxdF

b3l3r0f0nt3 · Febrero 20, 2021, 03:13:26 PM

No tienes permitido ver los links. Registrarse o Entrar a mi cuenta
hola muchas gracias.
tengo una duda cuando lo guardo y despues lo reviso me abre en internet explorer como cambio eso?

botón derecho sobre el archivo > abrir con > bloc de notas y ya puedes volver a editarlo. Si quieres usar otro navegador lo mismo, botón derecho, abrir con y seleccionas el navegador que quieras.

Un saludo.

patronux · Febrero 20, 2021, 03:56:54 PM

muchas gracias DtxdF
eso me ayudara demasiado

[HTML] Curso HTML desde cero

ANTRAX

Febrero 24, 2010, 11:50:54 AM Ultima modificación: Mayo 02, 2014, 10:22:59 PM por Destructor.cs

patronux

Febrero 20, 2021, 12:04:38 PM #1

DtxdF

Febrero 20, 2021, 12:20:24 PM #2 Ultima modificación: Febrero 20, 2021, 12:24:07 PM por DtxdF

b3l3r0f0nt3

Febrero 20, 2021, 03:13:26 PM #3

patronux

Febrero 20, 2021, 03:56:54 PM #4