Foros Indicedonkey

Su última visita fue el
Fecha y hora actual: Mar Dic 12, 2017 3:10 pm


POR LA LIBERTAD EN LA RED. NO AL CIERRE DE WEBS !!!
 

 F.A.Q.F.A.Q.   BuscarBuscar   Lista de MiembrosLista de Miembros   Grupos de UsuariosGrupos de Usuarios  RegístreseRegístrese
 PerfilPerfil   Conéctese para revisar sus mensajesConéctese para revisar sus mensajes   ConectarseConectarse 
Introducción HTML
Ir a página 1, 2  Siguiente
 
Publicar Nuevo Tema   Responder al Tema    Índice del Foro -> Diseño Web y Lenguajes de Programacion
Ver tema anterior :: Ver siguiente tema  
Autor Mensaje
Legolas_Bilbao
Gran Ex-Moderador


Registrado: 04 Mar 2006
Mensajes: 1988
Ubicación: At The middle earth || San Mames - La catedral

MensajePublicado: Mar Oct 03, 2006 10:27 pm    Título del mensaje: Introducción HTML Responder citando

HTML Básico (Primeros Pasos,Software necesario)

0 - Software Necesario

Para poder realizar paginas html, no hace falta un editor de pago como puede ser
dreamweaver , se podra usar usar el notepad, en este caso se empleara el notepad2
el cual permite visualizar las etiquetas por colores.
Notepad2

Se arranca el Notepad2 y aparece la siguiente pantalla


y en el se puede editar y realizar nuestras páginas

Cuando vayamos a guardar nuestras páginas se elige dentro de ficheros -> Web Source Code

Si usamos mozilla podremos validar nuestra página con la extension, esta validación es en base al w3c (www.w3c.org)


https://addons.mozilla.org/firefox/249/

1 - Introducción a HTML

1.1 ¿Qué es html?
Html es un lenguaje de etiquetas, esto es, tiene un etiqueta de apertura y una
de cierre en la mayoria de los casos como por ejemplo para poner cursivas

Principalmente es texto plano, pero con el avance de la tecnología se empezo a usar
imagenes, flash,...


1.2 Estructura

una página contiene la siguiente estructura básica
Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
         <html>
            <head>
               <title>Pagina de prueba</title>
               aqui podremos poner nuestras hojas de estilos y
               nuestros ficheros javascript (en futuros manuales...)
            </head>
            <body>
               Lo que se muestra en el navegador
            </body>
         </html>
         


1.3 Primer Ejemplo

Vamos a sacar una página, que simplemente tenga de titulo 1º ejemplo de HTML
y que muestre un hola mundo

hariamos lo siguiente

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
         <html>
            <head>
               <title>1º Ejemplo de HTML</title>
               
            </head>
            <body>
               <p>Hola Mundo ¡¡¡¡</p>
            </body>
         </html>
         

y el resultado es el siguiente

Pulsa

2 - Etiquetas Básicas:

2.1 Texto
Las etiquetas para modificar el texto, ponerlo en negrita,cursiva,subrayado,poner parrafos, saltos de linea.

2.1.1 Parrafos:

Para escribir Parrafos usamos la etiqueta
Código:
<p>Texto a escribir</p>

Si queremos situar el texto a la izquierda usaremos dentro de la etiqueta p align="<donde queremos situarlo>">
tenemos 3 opciones
- left -> izquierda
- center -> centro
- right -> derecha
ejemplo
Código:

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
         <html>
            <head>
               <title>1º Ejemplo de HTML</title>
               
            </head>
            <body>
               <p align="left">Hola Mundo ¡¡¡¡ Izquierda</p>
               <p align="center">Hola Mundo ¡¡¡¡ Centro</p>
               <p align="right">Hola Mundo ¡¡¡¡ Derecha</p>
            </body>
         </html>
         


2.1.2 Negrita:

Si queremos escribir un texto en negrita , simplemente emplearemos las etiquetas
Código:
<b></b>
y dentro el texto que
queremos resaltar

Código:

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
         <html>
            <head>
               <title>1º Ejemplo de HTML</title>
               
            </head>
            <body>
               <b>Hola mundo</b>
            </body>
         </html>
         


2.1.3 cursiva:

Si en cambio lo que queremos es poner el texto en cursiva , usamos las etiquetas
Código:
<i></i>
y dentro de las etiquetas el
texto que queremos poner en cursiva

Código:

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
         <html>
            <head>
               <title>1º Ejemplo de HTML</title>
               
            </head>
            <body>
               <i>Hola mundo</i>
            </body>
         </html>
         


2.1.4 Subrayado:

Si en cambio lo que queremos es poner el texto subrayado , usamos las etiquetas
Código:
<u></u>
y dentro de las etiquetas el
texto que queremos poner en cursiva

Código:

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
         <html>
            <head>
               <title>1º Ejemplo de HTML</title>
               
            </head>
            <body>
               <u>Hola mundo</u>
            </body>
         </html>
         


2.1.5 Salto de Linea:

El salto de linea se consigue usando la etiqueta
Código:
<br>


Código:

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
         <html>
            <head>
               <title>1º Ejemplo de HTML</title>
               
            </head>
            <body>
               Hola Foreros de Herpanitas <br>
               Hola Foreros de ForosIndice<br>
            </body>
         </html>
         


2.1.6 Fuente y Color del texto

Si queremos cambiar el color y el tamaño de la fuente, por ejemplo ponerlo en rojo y usar tipo de letra comic sans, tendremos que
usar la siguinte etiqueta
Código:
<font color="" size="" Face="">

Para colores -> http://www.w3schools.com/html/html_colors.asp
los atributos que van dentro de las etiquetas siempre van entre comillas y en el caso de font serían
color : para poner el color del texto
size : para el temaño del texto
Face : para el tipo de fuente

Código:

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
         <html>
            <head>
               <title>1º Ejemplo de HTML</title>
               
            </head>
            <body>
                              <font color="#006699" size="7" Face="Comic Sans MS">Hola Foreros de Herpanitas</font> <br>
               Hola Foreros de ForosIndice<br>
            </body>
         </html>
         


2.2 Enlaces:
Queremos poner enlaces en nuestra web y tenemos 2 tipos de enlaces a otras páginas que pueden ser externas a la nuestra o
para navegar dentro de nuestra propia web o enlaces para ir a una parte determinada de la página que estamos mostrando.

2.2.1 Enlaces Externos (por llamarlo de alguna manera):

-
Código:
<a href="pagina">nombre que queramos poner</a>


Dentro de nuestra propia pagina no hara falta poner el enlace entero por ejemplo estamos en index.html y queremos
ir a fotos.html simplemente sería añadir algo asi

Código:
<a href="fotos.html">Fotos</a>


Pero si por ejemplo queremos ir al foro de las herpanitas simplemente sería asi

Código:
<a href="http://www.herpanitas.com/phpBB/">Foro Herpanitas</a>


- Dentro de las etiquetas de enlaces tenemos unos atributos
href : el sitio donde queremos ir con ese enlace
target: donde queremos abrir ese enlace
- pagina nueva : target="_blank"
- misma página : target="_self" o no poner nada

2.2.2 Enlaces internos o anclas

Para ir a una parte de la propia página seria asi
1º un enlace que pulsando en el nos dirija a un sitio determinado
Código:
<a href="#pro1" class="alista">Normas</a>

2º en el sitio al que queremos ir
Código:
<a name="pro1"/>Normas


Hay que tener en cuenta lo siguiente.
en href="#<nombre puesto por nosotros>" y en name="<nombre puesto por nosotros>" tiene que ser el
mismo


2.3 Listas

En html, podemos tener 2 tipos de listas, ordenadas (usando números) o listas no ordenadas

2.3.1 Listas sin orden

Tienen la siguiente estructura
Código:

               <ul>
                  <li></li>
               </ul>
            


la etiqueta
Código:
<ul></ul>
, es el principio de apertura de una lista no ordenada, por defecto
el elemento de la lista que aparece es un circulo negro

2.3.1 Listas con orden

Tienen la siguiente estructura
Código:

               <ol>
                  <li></li>
               </ol>
            


la etiqueta
Código:
<ul></ul>
, es el principio de apertura de una lista no ordenada, por defecto
el elemento de la lista que aparece en primer lugar es un uno.

Se pueden anidar tanto listas ordenadas como no ordenadas.


2.4 Tablas

normalmente se usan para estructurar la información, como todos sabemos tenemos filas y columnas para los cuales tambien tendremos
sus propias etiquetas.


Para comenzar con tablas es obligatorio usar la etiqueta
Código:
<table></table>

la cual uno de los atributos mas usuales es si queremos que tenga borde o no, por defecto no tiene
y si queremos borde sería algo tal que asi

Tabla con borde "1"
Código:
<table border="1"></table>


La etiqueta para filas es
Código:
<tr></tr>


la etiqueta para columnas es
Código:
<td></td>


si por ejemplo queremos una tabla que la primera fila sea una unica columna pero que en las restantes haya n columnas
simplemente dentro de las etiquetas para hacer tablas
Código:
<table></table>


hariamos algo tal que así (en este caso n = 2)
Código:

            <table>
            <tr>
               <td colspan="2"></td>
               
            </tr>   
            <tr>
               <td></td>
               <td></td>
            </tr>   
            </table>
            
         


tabla de 2 filas por 2 columnas

Código:

            <table>
            <tr>
               <td></td>
               <td></td>
            </tr>   
            <tr>
               <td></td>
               <td></td>
            </tr>   
            </table>
            
         





2.5 Imagenes

Para poder mostrar imagenes en nuestras paginas, tendremos que usar la siguientes etiquetas
Código:
 <img src="url donde esta alojada la pagina"/>

esto es si en nuestra pagina la tenemos dentro de una carpeta img simplemente tendriamos que poner

Código:
<img src="img/foto.jpg"/>


Tambien podemos hacer que la imagen sea mas o menos grande, y esto se consigue añadiendo los siguientes atributos
heigth : para la altura de la imagen
width : para la anchura de la foto

2.6 Comentarios

Se puede comentar el código, para poder aclarar al que lo lee, a que parte corresponde de la página que se muestra.

Código:
   <!--  lo que se quiere comentar -->

_________________
Liga de los foreros

Dios creo un equipo perfecto, a los demás los lleno de extranjeros



Ultima edición por Legolas_Bilbao el Mie Oct 04, 2006 5:14 pm; editado 2 veces
Volver arriba
Ver perfil del usuario Enviar mensaje privado
Legolas_Bilbao
Gran Ex-Moderador


Registrado: 04 Mar 2006
Mensajes: 1988
Ubicación: At The middle earth || San Mames - La catedral

MensajePublicado: Mie Oct 04, 2006 9:27 am    Título del mensaje: Responder citando

actualizado con etiquetas basicas de texto, luego seguire con enlaces, listas y tablas
_________________
Liga de los foreros

Dios creo un equipo perfecto, a los demás los lleno de extranjeros

Volver arriba
Ver perfil del usuario Enviar mensaje privado
KurtKo69
Super-Post Man
Super-Post Man


Registrado: 01 May 2006
Mensajes: 918
Ubicación: Entre mi kama y la neVera

MensajePublicado: Mie Oct 04, 2006 10:56 am    Título del mensaje: Responder citando

Genial que empieces un "cursilo" de html Very Happy Espero que me ayude para crear en un futuro alguna paginilla Very Happy
_________________

MYSPACE DE MI GRUPO
Mi Blog de VIDEOJUEGOS
Volver arriba
Ver perfil del usuario Enviar mensaje privado Visitar sitio web del autor MSN Messenger
Legolas_Bilbao
Gran Ex-Moderador


Registrado: 04 Mar 2006
Mensajes: 1988
Ubicación: At The middle earth || San Mames - La catedral

MensajePublicado: Mie Oct 04, 2006 11:01 am    Título del mensaje: Responder citando

KurtKo69 escribió:
Genial que empieces un "cursilo" de html Very Happy Espero que me ayude para crear en un futuro alguna paginilla Very Happy


me alegro ire poniendo cosas durante estos dias, en los ratos libres que tenga

por ahora faltan imagenes,listas y tablas
_________________
Liga de los foreros

Dios creo un equipo perfecto, a los demás los lleno de extranjeros

Volver arriba
Ver perfil del usuario Enviar mensaje privado
McGrady4ever
Mil y 1 noches en el foro
Mil y 1 noches en el foro


Registrado: 30 Mar 2006
Mensajes: 1062

MensajePublicado: Mie Oct 04, 2006 11:22 am    Título del mensaje: Responder citando

Muy buen curro legolas, estupendo tutorial este.... Wink
Volver arriba
Ver perfil del usuario Enviar mensaje privado
Legolas_Bilbao
Gran Ex-Moderador


Registrado: 04 Mar 2006
Mensajes: 1988
Ubicación: At The middle earth || San Mames - La catedral

MensajePublicado: Mie Oct 04, 2006 5:16 pm    Título del mensaje: Responder citando

No toco frames, por que no he trabajado con ellos y no me gustan Embarassed y el tema de envio de formularios lo dejo para cuando tenga un poco de tiempo y haga un manualcillo de php o jsps básico

PD: cualquier mejora,referencia o ampliación comentarla aqui

un saludo
_________________
Liga de los foreros

Dios creo un equipo perfecto, a los demás los lleno de extranjeros

Volver arriba
Ver perfil del usuario Enviar mensaje privado
Pléyades
El alma de Indice
El alma de Indice


Registrado: 30 Mar 2006
Mensajes: 2201
Ubicación: Un cúmulo de Tauro (Las Pléyades)

MensajePublicado: Mie Oct 04, 2006 5:29 pm    Título del mensaje: Responder citando

Razz

Muchas gracias por el tutto, genial legolas, buena idea,,
_________________
Las pirámides, ya estaban ahí antes que los egipcios.

Volver arriba
Ver perfil del usuario Enviar mensaje privado Enviar correo Yahoo Messenger
jose666
Si no posteo reviento
Si no posteo reviento


Registrado: 16 May 2006
Mensajes: 310

MensajePublicado: Mie Oct 04, 2006 8:37 pm    Título del mensaje: Responder citando

Legolas_Bilbao escribió:
No toco frames, por que no he trabajado con ellos y no me gustan Embarassed y el tema de envio de formularios lo dejo para cuando tenga un poco de tiempo y haga un manualcillo de php o jsps básico

PD: cualquier mejora,referencia o ampliación comentarla aqui

un saludo
Hey ke curro, no lo havia visto, esta bien explicado. Respecto a los frames mejor pasa de ellos solo traen ke problemas mejor usar capas.

Saludos.
Volver arriba
Ver perfil del usuario Enviar mensaje privado
Legolas_Bilbao
Gran Ex-Moderador


Registrado: 04 Mar 2006
Mensajes: 1988
Ubicación: At The middle earth || San Mames - La catedral

MensajePublicado: Mie Oct 04, 2006 8:56 pm    Título del mensaje: Responder citando

jose666 escribió:
Legolas_Bilbao escribió:
No toco frames, por que no he trabajado con ellos y no me gustan Embarassed y el tema de envio de formularios lo dejo para cuando tenga un poco de tiempo y haga un manualcillo de php o jsps básico

PD: cualquier mejora,referencia o ampliación comentarla aqui

un saludo
Hey ke curro, no lo havia visto, esta bien explicado. Respecto a los frames mejor pasa de ellos solo traen ke problemas mejor usar capas.

Saludos.

si uso capas, pero eso lo utilizare cuando haga un tuto sobre css

tengo q leer unas cosas y explicarlo
_________________
Liga de los foreros

Dios creo un equipo perfecto, a los demás los lleno de extranjeros

Volver arriba
Ver perfil del usuario Enviar mensaje privado
chavecillo
No tengo casa,vivo aquí
No tengo casa,vivo aquí


Registrado: 31 Mar 2006
Mensajes: 568
Ubicación: En el numero 7, calle melancolia.

MensajePublicado: Mar Nov 07, 2006 5:28 pm    Título del mensaje: Responder citando

aber mamona bilbaina, resuelveme una dudilla

Kiero poner un texto preformateado, uso la etiqueta PRE, pero lo ke pasa es ke lo kiero en letra verdana y tamaño 2(font face="Verdana" size=2), pero ponga donde lo ponga siempre sale en formato feo askeroso.

Dime a ver como coño lo puedo acer, e intentado buscar otra etiketa ke me muestre un texto tal como esta escrito, pero no e encontrado nada...y por lo ke e leido por ahi con la etiketa pre me puedo olvidar de la etiketa font pk no va...

A ver ke me dices, es ke tengo ke mostrar un texto ke puede cambiar con el tiempo, y lo tengo ke mostrar siempre con el mismo formato, verdana tamaño 2...jejejeje

Venga mamon, iluminame.
_________________
Si algun dia yo vuelvo a soñar intentaré,
seguir con lo mismoooo.
Y diez minutos antes de dormir yo estaré,
siempre ke kiera contigooo...
(muchachito, el mejó)

por cortesia del señó zorroc:

Donkeyro es un segundon:
Volver arriba
Ver perfil del usuario Enviar mensaje privado
Legolas_Bilbao
Gran Ex-Moderador


Registrado: 04 Mar 2006
Mensajes: 1988
Ubicación: At The middle earth || San Mames - La catedral

MensajePublicado: Mar Nov 07, 2006 6:11 pm    Título del mensaje: Responder citando

puedes aplicar hojas de estilo

de todas formas para p usa font="verdana" size="2"
_________________
Liga de los foreros

Dios creo un equipo perfecto, a los demás los lleno de extranjeros

Volver arriba
Ver perfil del usuario Enviar mensaje privado
chavecillo
No tengo casa,vivo aquí
No tengo casa,vivo aquí


Registrado: 31 Mar 2006
Mensajes: 568
Ubicación: En el numero 7, calle melancolia.

MensajePublicado: Mie Nov 08, 2006 6:14 pm    Título del mensaje: Responder citando

a ver mamona, lo de hojas de estilo me lo mirare pk no se lo ke es.

Te explico otra vez el problema, tengo un texto, con sus intro's y todo eso, si pongo solo p no me ace los saltos de linea y me lo saca todo seguido. Y si pongo pre me hace los saltos de linea pero no me sale en verdana al tamaño ke yo kiero...

Asi ke por un lado si ago pre me sale en un formato inadecuado y si pongo p y font size y face me sale todo seguido aunke en formato correcto...

Como puedo acer pa ke me reconozca los intros y ke tenga el formato ke yo kiero??
_________________
Si algun dia yo vuelvo a soñar intentaré,
seguir con lo mismoooo.
Y diez minutos antes de dormir yo estaré,
siempre ke kiera contigooo...
(muchachito, el mejó)

por cortesia del señó zorroc:

Donkeyro es un segundon:
Volver arriba
Ver perfil del usuario Enviar mensaje privado
donkeyro
Moderador de Juegos PC y Wii.
Moderador de Juegos PC y Wii.


Registrado: 25 Mar 2006
Mensajes: 3413
Ubicación: [VagosGroupRippers]

MensajePublicado: Mie Nov 08, 2006 6:50 pm    Título del mensaje: Responder citando

<br/> ??? Rolling Eyes Embarassed
_________________




Volver arriba
Ver perfil del usuario Enviar mensaje privado Visitar sitio web del autor
Legolas_Bilbao
Gran Ex-Moderador


Registrado: 04 Mar 2006
Mensajes: 1988
Ubicación: At The middle earth || San Mames - La catedral

MensajePublicado: Mie Nov 08, 2006 6:52 pm    Título del mensaje: Responder citando

donkeyro escribió:
<br/> ??? Rolling Eyes Embarassed

salto de página Wink , pero dependiendo del navegador no hace falta la etiqueta de cierre la puedes poner asi
Código:
<br>

_________________
Liga de los foreros

Dios creo un equipo perfecto, a los demás los lleno de extranjeros

Volver arriba
Ver perfil del usuario Enviar mensaje privado
chavecillo
No tengo casa,vivo aquí
No tengo casa,vivo aquí


Registrado: 31 Mar 2006
Mensajes: 568
Ubicación: En el numero 7, calle melancolia.

MensajePublicado: Vie Nov 10, 2006 3:13 pm    Título del mensaje: Responder citando

eh!!, mamones!!

Se hacer un salto de pagina!!(soy una mierda de informatico pero todo el mundo sabe leerse un documento online pa informarse...) la qüestion es que el texto viene de un documento aparte de una aplicación, que cambia, y en un documento de una aplicación que va cambiando, NO PONEN BR, sino ke le dan al enter y ya sale el salto de pagina en la pantalla.

El texto que yo tengo, tiene saltos de pagina, pero no con br's, y no puedo recorrer el texto me viene dado por un enlace y sale todo de golpe(como ya dije antes tengo ke poner texto preformateado pa ke me salgan los saltos de pagina, pero entonces no puedo cambiar el formato....

PSD: me e explicado bien?? jajaja, es ke no me se ace entendé!!
_________________
Si algun dia yo vuelvo a soñar intentaré,
seguir con lo mismoooo.
Y diez minutos antes de dormir yo estaré,
siempre ke kiera contigooo...
(muchachito, el mejó)

por cortesia del señó zorroc:

Donkeyro es un segundon:
Volver arriba
Ver perfil del usuario Enviar mensaje privado
Mostrar mensajes anteriores:   
Publicar Nuevo Tema   Responder al Tema    Índice del Foro -> Diseño Web y Lenguajes de Programacion Todas las horas están en GMT + 1 Hora
Ir a página 1, 2  Siguiente
Página 1 de 2

 
Saltar a:  
No puede crear mensajes
No puede responder temas
No puede editar sus mensajes
No puede borrar sus mensajes
No puede votar en encuestas


Powered by phpBB © 2001, 2005 phpBB Group