This site is no longer active, all members have migrated to devotedcheating.com . Thankyou



 
Actionhacks.netHomeFAQRegisterLog in

Share | 
 

 guide 4 programing whit HTML ----Guia para programar con HTML

Go down 
AuthorMessage
omg.cat
VIP LVL-4
VIP LVL-4
omg.cat

Posts : 22
Reputation : 6
Join date : 2009-11-15
Age : 49
Location : Bcn -Spain

PostSubject: guide 4 programing whit HTML ----Guia para programar con HTML   Fri Dec 18, 2009 10:20 am


Hola miembros de actionks.net , en este post vamos a ver el sistema de programacion HTML.
El HyperText Markup Language o mejor conocido como: html , es un
lenguaje de programación con uso de etiquetas que es para
uso exclusivo del diseño web.
a continuació los tags que se utilizan para la escritura html :
1. salen todas tus palabras en minusculas normalmente esta etiqueta
se usa para los derechos reservados del autor ect.
2. tus palabras salen en color negro, el tamaño es el que le agregues
a la variable x ( 1 > 6 )
3.
esta etiqueta sirve para hacer solo un renglón de tus apuntes
4. <U>sirve para subrayar una o un conjunto de palabras
5. <I>aparenta le letra en cursiva
6. hace una o un conjunto de palabras negritas (gruesas)
7.
sirve para hacer un cambio de renglón sin cierre de esta etiqueta
ejemplo:
escribes
hola
como estas?
obtienes
hola
como estas?
8.

    y
  • la etiqueta
      produce una lista de palabras con
      puntos, y cada palabra se define por la etiqueta

    • ejemplo:
      escribes

      • tu nombre:
      • tu apellido:
      • tu segundo apellido:

          obtienes
          . tu nombre:
          . tu apellido:
          . tu segundo apellido:
          9.
            y
          1. la etiqueta
              produce una lista de palabras con
              numeros ordenadamente, y cada palabra se define por la etiqueta

            1. ejemplo:
              escribes

              1. tu nombre:
              2. tu apellido:
              3. tu segundo apellido:

                  obtienes
                  1. tu nombre:
                  2. tu apellido:
                  3. tu segundo apellido:
                  10. La etiqueta permite cambiar la fuente y puede tener hasta
                  tres atributos: SIZE, COLOR y FACE.
                  SIZE define el tamaño del texto.
                  Puede ser cualquier valor de 1 a 7. El tamaño real depende del
                  navegador.
                  COLOR define el color del texto comprendido entre las etiquetas
                  y .
                  El color está dado como un código de valor tri-hexadecimal de la
                  siguiente forma #RRGGBB, para los valores rojo, verde y azul
                  respectivamente.
                  FACE define el nombre de la fuente que se debe utilizar.
                  ES posible indicar varios nombres. En este caso, el navegador
                  utilizará la primera fuente que encuentre.
                  Se puede combinar todos estos atributos para lograr un formato
                  original:
                  ejemplo:

                  Mi texto aparece en rojo y con la fuente Times

                  -----------------------
                  Como agregar imagenes, vinculos o links :
                  -----¿que es un vinculo o link?-----
                  un vinculo o link es una o muchas palabras que te llevan a una página web con solo darle un click al vinculo.
                  -----¿como sabemos cuando hay un vinculo?-----
                  los vinculos generalmente se representan, al pasar sobre la palabra
                  o las palabras con un color distintivo hacia las otras palabras de la
                  web. Y otra forma de detectarlas es al pasar el cursor encima de la palabra, cambia
                  a una mano generalmente.
                  -----¿como hacer un vinculo?------
                  Bueno existe algo que se llama ancla que se utiliza para muchas cosas
                  una de ella es hacer vinculos para así tener la página donde vas y
                  lo que aparecería en tu web para darle click es como algo virtual.
                  pero para hacer un vinculo tienes que convinar la ancla con el atributo
                  href que es el atributo que te llevara a el destino despues al ancla se
                  le da una señal para ocultar el vinculo y mostrar palabras en la web
                  que llevaran a el vinculo

                  ejemplo:
                  [url=http://www.actionhacks.net/la web]lo que saldra en la web[/url]
                  -----¿como poner una imagen en mi web?-----
                  La etiqueta que nos sirve para incluir imágenes en nuestras páginas
                  del WEB es muy similar a la de enlaces a otras páginas,
                  La única diferencia es que, en lugar de indicar al programa navegador
                  el nombre y la localización de un documento de texto HTML para que
                  lo cargue, se le indica el nombre y la localización de un archivo que
                  contiene una imagen.
                  Una vez que se haya localizado su imagen en un directorio del
                  directorio raíz de documentos de su sitio, debería indicar una
                  posición para él en su página. Es allí que viene la etiqueta <IMG>.
                  ejemplo:

                  La etiqueta <IMG> necesita al menos un atributo para trabajar: SRC,
                  cuyo valor es la localización y el nombre del archivo que contiene
                  la imagen que se debe visualizar.
                  Dos otros atributos: WIDTH y HEIGHT son opcionales, pero se recomienda
                  utilizarlos y son muy útiles. Los valores que toman definen la anchura
                  y la altura de una imagen, y permiten al navegador conocer por
                  adelantado el tamaño de la imagen de manera que este pueda organizar
                  el texto de manera consecuente. Estos valores también permiten aumentar
                  o reducir el tamaño de una imagen para obtener croquis.
                  Otro atributo, ALT, permite añadir una descripción que aparece en la
                  pantalla cuando no se puede encontrar el recurso de imagen en el lugar
                  esperado.
                  Este es un ejemplo de inserción de una imagen con todos los atributos
                  que hemos visto en:

                  Un aspecto muy importante a tener en cuenta es el tamaño de las imágenes,
                  pues una imagen grande supone un archivo grande, y esto puede resultar
                  en un tiempo excesivo de carga, con el consiguiente riesgo de que
                  quien está intentando cargar nuestra página se canse de esperar,
                  y desista de ello.
                  Para elegir la posición de la imagen con respecto al texto hay distintas
                  posibilidades. La más sencilla es colocarla entre dos párrafos, con un
                  titular a un lado. Los navegadores más actuales (como el Netscape
                  Navigator y el Microsoft Internet Explorer) permiten que el texto
                  pueda rodear a la imagen.
                  De momento nos vamos a limitar a escoger la posición del titular
                  con respecto a la imagen. Se puede poner arriba, en medio o abajo
                  del lado de la imagen. Para ello se añade el comando ALIGN a la
                  etiqueta, de la siguiente manera:


                  Titular alineado arriba


                  Titular alineado en medio


                  Titular alineado abajo
                  Si se quieren lograr diseños fantasticos y rodear con textos los
                  gráficos exactamente igual que en las revistas se pueden usar los
                  comando o atributos conjuntamente con la etiqueta
                  , ALIGN=. Donde quiera que se desee que
                  aparezca una imagen basta con insertar:


                  Alinea la pagina a la izquierda


                  Alinea la pagina al centro


                  Alinea la pagina a la derecha
                  Si se quiere interrumpir el proceso de rellenado del texto a los
                  lados de la imagen, para que salte hasta debajo de ella, es decir,
                  dejar un espacio en blanco parcialmente, se pueden emplear las
                  siguientes extensiones de la etiqueta
                  :



                  Busca el primer margen libre (clear) a la izquierda.



                  Busca el primer margen libre a la derecha.



                  Busca el primer margen libre a ambos lados.


                  Un ejemplo para aclarar esto:
                  Este texto esta a un lado de la
                  imagen.

                  Este tambien esta a un lado de la imagen, en la linea siguiente.

                  Este otro texto, en cambio, ha buscado el primer margen
                  libre a la izquierda.
                  Otra posibilidad muy interesante es la de utilizar una imagen
                  como enlace a otra página. Para estos casos se utilizan generalmente
                  imágenes pequeñas (iconos), aunque se puede usar cualquier tipo de imagen.
                  entonces convinamos la etiqueta con <IMG> de la siguiente forma:
                  [url=http://www.actionhacks.net/la url]





                  hemos creado tres áreas de vínculo en la imagen image.gif. éstas están
                  agrupadas bajo una etiqueta que las representa en la imagen mediante
                  el atributo usemap de la etiqueta <IMG>. Cada región está definida de
                  manera precisa mediante una etiqueta .
                  La primera área es un rectángulo (con el atributo shape="rect"), cuyas
                  esquinas superior izquierda e inferior derecha están definidas por las
                  coordenadas de píxel (0,0) y (100,100), respectivamente. Su vínculo
                  asociado apunta a la página page1.html.
                  La segunda área es un polígono (con el atributo shape="poly"), cuyos
                  vértices están definidos por las coordenadas (200,200), (200,0), (300,20)
                  y (300,180). La forma que resulta es un trapecio, cuyo lado derecho es
                  menor que el izquierdo. Su vínculo asociado apunta a la página page2.html.
                  La tercera área es un círculo (con el atributo shape="circle"), que tiene
                  un centro definido por las coordenadas (150,150) y un radio de 50 píxeles.
                  Su vínculo asociado apunta a la página page3.html.
                  En todo caso, estas coordenadas se refieren a la imagen; las coordenadas
                  (0,0) indican la esquina superior izquierda de la imagen.
                  tablas
                  Las tablas pueden parecer un modo sencillo de disponer el texto en
                  columnas o quizás de añadir un titular a una ilustración, pero hay
                  modos de sacar un gran partido de una característica aparentemente
                  sencilla. La etiqueta
                  puede ser una poderosa herramienta deformato. Se puede hacer por ejemplo, no mostrar el borde de una tablaen absoluto. Tambien se puede hacer uso de la etiqueta
                  paraubicar texto e imagenes con precisión, en prácticamente casi cualquierlugar de una página.Estructura de una tablaVamos a ver ordenadamente (de fuera hacia dentro) las etiquetasnecesarias para confeccionar las tablas.
                  [resto de las etiquetas]
                  Es la etiqueta general, que engloba a todas las demás.

                  [resto de las etiquetas]
                  Presenta los datos tabulados con un borde, haciendo las tablas más
                  atractivas, y el grosor es de numero de pixeles.
                  [tr]
                  [etiquetas de las distintas celdas de la primera fila]
                  [/tr]
                  Permite formar cada fila de la tabla. Hay que repetirla tantas
                  veces como filas queremos que tenga la tabla.

                  [td]
                  [contenido de cada celda (imágenes, texto, etc.)]
                  [/td]
                  Permite formar las distintas celdas que contendrá cada fila de
                  la tabla. Hay que repetirlas tantas veces como celdas queramos que
                  tenga la fila.


                  [encabezamiento de tabla]

                  Es utilizada para colocar encabezamientos en negrita sobre las
                  columnas

                  EJEMPLO





                  Columna 1Columna 2Columna 3
                  fila1 - c elda1fila1 - celda2fila1 - celda3
                  fila2 - celda1fila2 - celda2fila2 - celda3

                  [Aquí van las etiquetas que visualizan la página]


                  ¿Qué pasa si el numero de celdas de una fila es distinto al de otra?
                  Pues el navegador forma el número de filas y columnas que haga falta,
                  dejando espacios en blanco en las filas que tengan menos celdas.
                  Titular de tabla
                  Se puede añadir un titulo a la tabla, es decir un texto situado
                  encima de la tabla que indica cuál es su contenido. Se consigue
                  con la etiqueta y . Por ejemplo:
                  Esta es mi primera tabla
                  TITULO
                  Coloca él titulo sobre la tabla.

                  TITULO
                  Coloca él titulo bajo la tabla.

                  Contenido de las celdas
                  Solo se ha puesto hasta ahora en el ejemplo, texto normal dentro de las distintas celdas. Pero se puede poner en ellas cualquier otro elemento de los que van en un documento HTML, como imágenes, enlaces, etc. No hay más que poner dentro de la etiqueta de la celda la etiqueta correspondiente a una imagen, un enlace, etc.
                  EJEMPLOS:
                  Con una imagen
                  Con un enlace
                  [url=http://www.actionhacks.net/index.html]Mi página principal

                  Posicionamiento del contenido dentro de la celda
                  Normalmente, el contenido de una celda está alineado a la izquierda.
                  Pero se puede cambiar esto añadiendo dentro de la etiqueta de la celda
                  los siguientes atributos:
                  [td ALIGN="CENTER"]Al centro [/td]
                  [td ALIGN="RIGHT"]A la derecha [/td]
                  Cabecera a la izquierda
                  El alineamiento por defecto en el sentido vertical es en el medio.
                  También se puede cambiar, añadiendo dentro de la etiqueta de la celda
                  los siguientes atributos:
                  [td VALIGN="TOP"]Arriba [/td]
                  [td VALIGN="BOTTOM"]Abajo [/td]
                  Variando las dimensiones de la tabla
                  El navegador se encarga normalmente de dimensionar el tamaño
                  total de la tabla de acuerdo con el número de filas, de columnas,
                  por el contenido de las celdas, espesor de los bordes, etc.
                  A veces nos puede convenir forzarle para que la tabla tenga
                  unas dimensiones totales mayores que las que le corresponden,
                  tanto en anchura como en longitud. Esto se consigue añadiendo dentro
                  de la etiqueta de la tabla los atributos WIDTH y HEIGHT igual a un
                  porcentaje de la dimensión de la pantalla, o a una cifra que equivale
                  al número de pixels.
                  Por ejemplo, si colocamos:
                  O, por ejemplo ponemos:
                  Celdas que abarcan a otras variasA veces puede interesarnos que una celda se extienda sobre otras varias. Esto se consigue añadiendo dentro de la etiqueta de la celda los atributos COLSPAN=número para extenderse sobre un número determinado de columnas, o ROWSPAN=número para extenderse verticalmente sobre un número determinado de filas. Por ejemplo, en la primera tabla del ejemplo anterior vamos a añadir una fila con una sola celda, que abarca a dos columnas: <tr>O, en la misma tabla, vamos a añadir una celda en la primera fila, pero que abarque también a la siguiente: Color de fondo en las tablasPodemos conseguir que las tablas tengan un color de fondo, siguiendo un procedimiento totalmente análogo al empleado para que una página tenga un color de fondo uniforme (según vimos en el capítulo 7). Para ello debemos utilizar el atributo BGCOLOR="#XXYYZZ", visto en dicho capítulo. Se puede conseguir:
                  Celda sobre 2 columnas
                  Celda junto a 2 filas
                  [resto de las etiquetas]
                  La totalidad de la tabla tendrá un color de fondo.

                  [td BGCOLOR="#XXYYZZ"]
                  [contenido de la celda]
                  [/td]
                  Solamente una celda determinada tendrá un color de fondo,
                  distinto al del resto de la tabla.

                  Imágenes de fondo en las tablas :
                  El Explorer de Microsoft soporta la colocación de imágenes de fondo en el interior de las tablas, de una manera análoga a como se hace en una página (según vimos en el capítulo 7). Para ello debemos, utilizar el atributo BACKGROUND="imagen.gif" o BACKGROUND="imagen.jpg", visto en dicho capítulo.
                  Si se utiliza dentro de la etiqueta
                  la imagen en cuestión se multiplicará detrás de todas las celdas. (Con el Netscape no se verá ninguna imagen de fondo, sólo con el Explorer) Si, por el contrario, sólo se pone este atributo dentro de la etiqueta de una celda concreta (
                  o ), entonces la imagen de fondo se verá sólo en esa celda. Separación entre las celdas de una tabla :Por defecto, la separación entre las distintas celdas de una tabla es de dos pixels. Pero se puede variar esto con el atributo CELLSPACING, que se pone dentro de la etiqueta TABLE. Por ejemplo, para obtener una separación de 20 pixels entre celdas ponemos:
                  <TABLE border=1 cellSpacing=20>A primera vista parece como si esto fuera lo mismo que si hubiéramos aumentado el espesor de los bordes. Pero para comprobar que no es así, hagamos que en el caso anterior, tenga además unos bordes de 5 de espesor:
                  </TABLE>
                  <TABLE border=5 cellSpacing=20>Separación entre el borde y el contenido dentro de las celdas Por defecto, la separación entre el borde y el contenido dentro de las celdas es de un pixel. Se puede cambiar esto con el atributo CELLPADDING, que se pone dentro de la etiqueta TABLE. Por ejemplo, para obtener una separación de 20 pixels entre el contenido y los bordes, dentro de cada celda:
                  </TABLE>
                  <TABLE border=1 cellPadding=20>Se puede combinar este atributo con CELLSPACING (visto en el apartado anterior). Por ejemplo, una tabla con bordes de 5 de espesor, separación entre celdas de 15 y separación del contenido con respecto a los bordes de las celdas de 20, lo obtendríamos con:
                  </TABLE>
                  <table border=5 cellSpacing=15 cellPadding=20>Imagen de fondoNo sólo se colocan imágenes en un texto. Gracias a la etiqueta y a su atributo BACKGROUND, también pueden aparecer como fondo de unapágina.Ejemplo: Se utiliza la imagen background.gif como un diagrama, visualizada demanera repetida en el fondo (como mosaico). Si no se puede encontrar,se visualizará como fondo el color especificado o predeterminado.Esto es todo , espero que os sirva como a mi , de gran ayuda.Un saludo a todos
                  omg.cat
                  Hello actionks.net members in this post we will see the HTML programming system. The HyperText Markup Language, or better known as: html, is a programming language use of labels is to sole use of web design. a continuació the tags that are used for writing html: 1. leave your words in this tag usually lowercase is used for author's rights reserved ect. 2. your words come in black, size is the one that you add the variable x (1> 6) 3. this tag is used to make only one line of your notes 4. <U>serves to emphasize one or a set of words 5. <I>point it appears in italics 6. NEWS makes a set of words or bold (thick) 7. serves to make a change without closing line of this label example: write hello how are you? get hi how are you? 8.

                    and

                    • label produces a list of words points, and each word is defined by the label
                    • example: write

                      • your name:
                      • your name:
                      • your middle name:
                          get . your name: . Your name: . your middle name: 9.
                            and
                            1. label produces a list of words numerous computers, and each word is defined by the label
                            2. example: write

                              1. your name:
                              2. your name:
                              3. your middle name:
                                  get 1. your name: 2. Your name: 3. your middle name: 10. The tag lets you change the source and can be up three attributes: SIZE, COLOR and FACE. SIZE defines the size of the text. It can be any value from 1 to 7. The actual size depends on the browser. Color defines the color of the text between the tags And . The color code is given as a hexadecimal value of the tri - # RRGGBB follows, for the values red, green and blue respectively. FACE defines the font name to be used. You can specify several names. In this case, the browser use the first font it finds. You can combine all these attributes to achieve a format original: example: SIZE="+1" COLOR="#FF0000" My text appears in red with the Times ----------------------- How to add images, links or links: -----¿ Is a link or link ?----- a bond or link is one or many words that take you to a web page with just one click to tie him. -----¿ As we know when there is a link ?----- the links are generally represented in passing on the word or words with a distinctive color to the other words in the web. And another way to detect them is to move the cursor over the word, change generally to a hand. -----¿ How to make a link ?------ Well there is something called an anchor that is used for many things one of them is doing well have links to the page where you and what would appear in your website to give it as something virtual click. but do you have agreed to link the anchor with the attribute href is the attribute that will bring you to the destination after the anchor gives a signal to hide the link and display words on the web which would lead to the bond example: [url=http://www.actionhacks.net/la web]what will come out on the web -----¿ Like putting a picture on my web ?----- The label serves to include images in our pages WEB is very similar to links to other sites, The only difference is that instead of indicating to the browser program the name and location of a text document to HTML load it, it tells you the name and location of a file contains an image. Once your image has been located in a directory document root directory of your site, should indicate a position for him on your page. It is there that comes <IMG>. example: The <IMG> needs at least one attribute to work: SRC, whose value is the location and name of the file containing the image to be displayed. Two other attributes WIDTH and HEIGHT are optional, but recommended use and are very useful. The values that define the width taken and the height of an image and allows the browser to know by advance the image size so that it can organize the text consistently. These values also help increase or reduce the size of an image to get a sketch. Another attribute, ALT, lets add a description in the screen when you can not find the image resource in place expected. This is an example of inserting an image with all the attributes we've seen: SRC="images/my_image.gif" <IMG alt="Holiday photo" width=250 height=100> A very important aspect to consider is the size of images, for a large image is a large file, and this can be in charge too long, with the risk that who is trying to feed us you tired of waiting, and to desist from it. To choose the image position on the text is different possibilities. The simplest is to place it between two paragraphs, with a holder on the side. The latest browsers (like Netscape Navigator and Microsoft Internet Explorer) allow the text can surround the image. For now we will limit us to choose the position of the holder with respect to the image. You can put up in the middle or below side of the image. To this is added the ALIGN command label, as follows: Holder aligned above SRC="isla.gif" <IMG align=middle> Holder aligned in the middle Aligned down holder If you want to achieve great design and surround with the texts graphics just like in the magazines you can use the command or attributes together with the label , ALIGN =. Wherever they want appears just insert an image: SRC="/camino/imagen.gif" <IMG align=left> Aligns the left page SRC="/camino/imagen.gif" <IMG align=center> Center align the page SRC="/camino/imagen.gif" <IMG align=right> Align the right product If you want to interrupt the process of filling the text sides of the image, to jump up under it, ie leave a blank space in part, may be employed following extensions of the label : Free margin for the first (clear) to the left. Finds the first encyclopedia on the right margin. Finds the first free margin on both sides. An example to clarify this: This text is on one side of the image. This is also one side of the image, the next line. CLEAR=LEFT> Href="page2.html" Href="page3.html" We created three areas of the image link image.gif. these are grouped under a label that represents the image by usemap attribute of <IMG>. Each region is defined precisely by labeling . The first area is a rectangle (with the attribute shape = "rect"), whose upper-left and bottom right are defined by pixel coordinates (0,0) and (100.100), respectively. Your link associated points to page page1.html. The second area is a polygon (with the attribute shape = "poly"), whose vertices are defined by the coordinates (200,200) (200.0) (300.20) and (300.180). The way that it is a trapezoid, whose right side is smaller than the left. Your link points to page associated page2.html. The third area is a circle (with the attribute shape = "circle"), which has a center defined by the coordinates (150,150) and a radius of 50 pixels. Your link points to page associated page3.html. In any case, these coordinates refer to the image, the coordinates (0,0) indicate the upper left corner of the image. Tables The tables may seem a simple way to arrange the text columns or perhaps add an operator for an illustration, but there ways to make a great match of a feature apparently simple.

                                </LI>

                              </LI>

                            </LI>










                        </LI>

                      </LI>

                    </LI>

                  </TABLE>
                  <TABLE>The label can be a powerful tool format. It can be done by example, not showing the edge of a table at all. You can also use tags to
                  </TABLE>
                  <TABLE>place text and images accurately, practically any instead of a page. Structure of a Table Let's see an orderly (from outside to inside) labels needed to manufacture the boards.
                  </TABLE>
                  <TABLE>[rest of the labels] It is the general label that encompasses all others.
                  </TABLE>
                  <TABLE border=n>[rest of the labels] It presents the data tabulated by a border, with more tables attractive, and the thickness is number of pixels.
                  <TR>[tags of different cells in the first row] Allows the formation of each row of the table. Must be repeated many Sometimes it is to have as rows the table.
                  <td>[contents of each cell (images, text, etc.).] Allows the formation of the various cells that contain each row of the table. It should be repeated as often as we like cells that has the row. [table header] It is used to place on the bold headings Columns EXAMPLE </TD></TR></TABLE>[/url]
                  </I></U>
                  [/url]

                </LI>

              </LI>

            </LI>



        </LI>


      </LI>


    </LI>








</I></U>[/url]</A>
Back to top Go down
chitoredhead
General Member
General Member


Posts : 44
Reputation : 0
Join date : 2009-12-06

PostSubject: Re: guide 4 programing whit HTML ----Guia para programar con HTML   Fri Dec 18, 2009 1:26 pm

WHAT THE F@CK I AINT GONA READ THAT DANG
Back to top Go down
omg.cat
VIP LVL-4
VIP LVL-4
omg.cat

Posts : 22
Reputation : 6
Join date : 2009-11-15
Age : 49
Location : Bcn -Spain

PostSubject: Re: guide 4 programing whit HTML ----Guia para programar con HTML   Sat Dec 19, 2009 11:22 am



Hola Chitoredhead , siento mucho todo el mareo de palabras del post...jajajaja
Voy arreglarlo lo antes posible y ya veras que claro y bien explicado queda.
Un saludo y felices navidades
omg.cat

Chitoredhead Hi, I'm sorry if I was very clear this post, I used the translator and hung much as I was pulling on my work wifi
Chitoredhead Hi, I'm sorry all the giddiness of words in the post ... jajajaja
I'll fix it as soon as possible and really that is clear and well explained.
A greeting and merry Christmas
omg.cat
Back to top Go down
chitoredhead
General Member
General Member


Posts : 44
Reputation : 0
Join date : 2009-12-06

PostSubject: Re: guide 4 programing whit HTML ----Guia para programar con HTML   Sat Dec 19, 2009 2:25 pm

si jajaja feliz navidad
Back to top Go down
omg.cat
VIP LVL-4
VIP LVL-4
omg.cat

Posts : 22
Reputation : 6
Join date : 2009-11-15
Age : 49
Location : Bcn -Spain

PostSubject: Re: guide 4 programing whit HTML ----Guia para programar con HTML   Sun Dec 20, 2009 6:47 am


Ready to go...............I finish in second place. 6 porsche cayman friend's in Montmelo. F1 official track
Drifting a go 100 MPH whitout speed control cameras and any control police.........Priceless. lol



-----¿Que es el html?---
El HyperText Markup Language o mejor conocido como html.

Es un lenguaje de programación con uso de etiquetas
para el diseño de paginas web.
---------------------------
-----!introducción al html!-----
El lenguaje html es solo de uso exclusivo
para el diseño web, este puede ser convinado con otro lenguaje
de diseño web llamado el php pero al convinarlo tendremos un
archivo de extensión .php .
Este lenguaje (html) es considerado uno de los lenguajes
mas faciles de manejar entre otros, pero también es muy
usado por las personas hasta estos días, aunque ya existen
actualmente programas para crear páguinas web, no olvidemos
que si quieren aprender hay que estudiar el lenguaje html.
No quiere decir que no se usen estos programas, de hecho algunas
veces resultan de gran ayuda , algunos ejemplos:
front page, dreamweaver entre otros.
En general el html se utiliza con unas etiquetas o mejor
conocidas como < tags > ,que hacen las ordenes señaladas, dependiendo
de que tag.
--------------------------------
-----!requisitos para empezar!-----

Necesitaremos para que para empezar descargarnos ya sea el programa
< front page >
o el < dreamweaver >, ya que lo usaremos para hacer nuestras pruebas
de los codecs...( intentare lo antes posible publicar
los link de descarga de estos programas. )
( tambien es una opccion , buscar el programa en softonic.com ,
y desde alli localizar al autor del programa
Y descargarnolo gratis desde la web del autor del programa
que queramos ...... Front page ó Dreamweaver )
-----------------------------------
-----!Empecemos!----
El programar con html , sigue un proceso correlativo,
al igual que si estubieramos escribiendo una carta,
pero en el caso de html no escribimos palabras.
-----------------------------------------------------

1. primero viene la etiqueta que expresa el comienzo del
lenguaje y hasta el final de todo tu codec ,ovbiamente se cerraria
el lenguaje con esta barra / que expresa el cierre de cualquier
etiqueta
------------------------------------------------------------------
2. despues viene que es el encabezamiento en donde se le
pueden poner algunos trucos y dentro de esta viene un tag que se
llama dentro de esta se pondra el título de la páguina
y despues de poner el título no hay que olvidar cerrar la etiqueta

------------------------------------------------------------------
3. viene despues lo que es el cuerpo en donde viene el
contenido de la página web en donde pondras la información que
quieres mostrar en la páguina y al finalizar el contenido cerramos

------------------------------------------------------------------
Bueno empezemos con un ejemplo simple.
abran el dreamweaver o el front page y vayanse a la parte en donde
tienen que agregar el codec, bien ya ahi ponen lo siguiente:
-----------------------------------------------------------
-----codec-----





aqui va el contenido de la páguina web




-----codec-----

-----------------------------------------------------------------
podran observar como en el dreamweaver o en el frontpage hasta
arriba dice el titulo como lo acabamos de indicar y el fondo es me
parece que verde porque en body pusimos un ATRIBUTO llamado
background que quiere decir fondo. Aqui ahi algo importante cuando
queremos especificar un atributo ahi que poner = y si por alguna
equivocación no te sirve, especifica mas con comillas ="lo que vaya".
Aqui en este codec ahi otra etiqueta llamada bueno esta etiqueta
es para poner un conjunto de palabras pero en donde esta la x en la
etiqueta podras marcar el tamaño de la letra "la mas grande es 1 y me
parece que llega hasta 6, esta podría ser una forma de escritura en tu
web.
A continuación pondre todos los tags que se utilizan para la escritura
en web intentare ponerlos todos :
-------------------------------
1. salen todas tus palabras en minuscula, normalmente esta etiqueta
se usa para los derechos reservados del autor ect.
-------------------------------------------------
2. tus palabras salen en color negro, el tamaño es el que le agregues
a la variable x (esta explicado arriba)
--------------------------------------
3.
esta etiqueta sirve para hacer solo un renglón de tus apuntes
--------------------------------------------------------------------
4. <U>sirve para subrayar una o un conjunto de palabras
--------------------------------------------------------
5. <I>aparenta le letra en cursiva
-----------------------------------
6. hace una o un conjunto de palabras negritas (gruesas)
------------------------------------------------------------
7.
sirve para hacer un cambio de renglón sin cierre de esta etiqueta
-------------------------------------------------------------------------
ejemplo:
escribes:

hola
como estas?
obtienes
hola
como estas?
8.
    y
  • la etiqueta
      produce una lista de palabras con
      puntos, y cada palabra se define por la etiqueta

    • -----------------------------------------------------
      ejemplo:
      escribes

      • tu nombre:
      • tu apellido:
      • tu segundo apellido:

          obtienes
          . tu nombre:
          . tu apellido:
          . tu segundo apellido:
          9.
            y
          1. la etiqueta
              produce una lista de palabras con
              numeros ordenadamente, y cada palabra se define por la etiqueta

            1. ejemplo:
              escribes

              1. tu nombre:
              2. tu apellido:
              3. tu segundo apellido:

                  obtienes
                  1. tu nombre:
                  2. tu apellido:
                  3. tu segundo apellido:
                  10. La etiqueta permite cambiar la fuente y puede tener hasta
                  tres atributos: SIZE, COLOR y FACE.
                  ----------------------------------
                  SIZE: define el tamaño del texto.
                  Puede ser cualquier valor de 1 a 7. El tamaño real depende del
                  navegador.
                  --------------------------------------------------------------

                1. COLOR: define el color del texto comprendido entre las etiquetas
                  y .
                  El color está dado como un código de valor tri-hexadecimal de la
                  siguiente forma #RRGGBB, para los valores rojo, verde y azul
                  respectivamente.
                  ----------------------------------------------------------------
                  FACE: define el nombre de la fuente que se debe utilizar.
                  ES posible indicar varios nombres. En este caso, el navegador
                  utilizará la primera fuente que encuentre.
                  Se puede combinar todos estos atributos para lograr un formato
                  original:
                  ejemplo:

                  Mi texto aparece en rojo y con la fuente Times

                  ---------------------------------------------------------------------
                  Bueno creo que esos son todos los tags de escritura.
                  Ahora pasamos a un tema interesante que es el como agregar un imagen
                  y como hacer vinculos o tambien conocidos como link

                  -----¿que es un vinculo o link?-----
                  un vinculo o link es una o muchas palabras que te llevan
                  a otra páguina web con solo darle un click al vinculo.
                  -----¿cuando saber cuando ahi un vinculo?-----
                  los vinculos generalmente se representan, al pasar sobre la palabra
                  o las palabras con un color distintivo hacia las otras palabras de la
                  web. Y otra forma de detectarlas es al pasar encima el cursor, este cambia
                  a una mano generalmente.
                  -----¿como hacer un vinculo?------
                  Bueno existe algo que se llama ancla que se utiliza para muchas cosas
                  una de ellas es hacer vinculos para así tener la páguina donde vas y
                  lo que aparecería en tu web para darle click es como algo virtual.
                  pero para hacer un vinculo tienes que convinar la ancla con el atributo
                  href que es el atributo que te llevara a el destino despues al ancla se
                  le da una señal para ocultar el vinculo y mostrar palabras en la web
                  que guiaran a el vinculo.... jeje es como ocultar el vinculo xd.
                  espero que me este explicando xd

                  ejemplo:
                  [url=http://www.actionhacks.net/la web]lo que saldra en la web[/url]
                  esto se puede convinar con los formatos de textos que deje arriba para
                  así centrar ect.
                  -----¿como poner una imagen en mi web?-----
                  La etiqueta que nos sirve para incluir imágenes en nuestras páginas
                  del WEB es muy similar a la de enlaces a otras páginas,
                  La única diferencia es que, en lugar de indicar al programa navegador
                  el nombre y la localización de un documento de texto HTML para que
                  lo cargue, se le indica el nombre y la localización de un archivo que
                  contiene una imagen.
                  Una vez que se haya localizado su imagen en un directorio del
                  directorio raíz de documentos de su sitio, debería indicar una
                  posición para él en su página. Es allí que viene la etiqueta <IMG>.
                  ejemplo:

                  La etiqueta <IMG> necesita al menos un atributo para trabajar: SRC,
                  cuyo valor es la localización y el nombre del archivo que contiene
                  la imagen que se debe visualizar.
                  Dos otros atributos: WIDTH y HEIGHT son opcionales, pero se recomienda
                  utilizarlos y son muy útiles. Los valores que toman definen la anchura
                  y la altura de una imagen, y permiten al navegador conocer por
                  adelantado el tamaño de la imagen de manera que este pueda organizar
                  el texto de manera consecuente. Estos valores también permiten aumentar
                  o reducir el tamaño de una imagen para obtener croquis.
                  Otro atributo, ALT, permite añadir una descripción que aparece en la
                  pantalla cuando no se puede encontrar el recurso de imagen en el lugar
                  esperado.
                  Este es un ejemplo de inserción de una imagen con todos los atributos
                  que hemos visto en:

                  Un aspecto muy importante a tener en cuenta es el tamaño de las imágenes,
                  pues una imagen grande supone un archivo grande, y esto puede resultar
                  en un tiempo excesivo de carga, con el consiguiente riesgo de que
                  quien está intentando cargar nuestra página se canse de esperar,
                  y desista de ello.
                  Para elegir la posición de la imagen con respecto al texto hay distintas
                  posibilidades. La más sencilla es colocarla entre dos párrafos, con un
                  titular a un lado. Los navegadores más actuales (como el Netscape
                  Navigator y el Microsoft Internet Explorer) permiten que el texto
                  pueda rodear a la imagen.
                  De momento nos vamos a limitar a escoger la posición del titular
                  con respecto a la imagen. Se puede poner arriba, en medio o abajo
                  del lado de la imagen. Para ello se añade el comando ALIGN a la
                  etiqueta, de la siguiente manera:


                  Titular alineado arriba


                  Titular alineado en medio


                  Titular alineado abajo
                  Si se quieren lograr diseños fantasticos y rodear con textos los
                  gráficos exactamente igual que en las revistas se pueden usar los
                  comando o atributos conjuntamente con la etiqueta
                  , ALIGN=. Donde quiera que se desee que
                  aparezca una imagen basta con insertar:


                  Alinea la pagina a la izquierda


                  Alinea la pagina al centro


                  Alinea la pagina a la derecha
                  Si se quiere interrumpir el proceso de rellenado del texto a los
                  lados de la imagen, para que salte hasta debajo de ella, es decir,
                  dejar un espacio en blanco parcialmente, se pueden emplear las
                  siguientes extensiones de la etiqueta
                  :



                  Busca el primer margen libre (clear) a la izquierda.



                  Busca el primer margen libre a la derecha.



                  Busca el primer margen libre a ambos lados.


                  Un ejemplo para aclarar esto:
                  Este texto esta a un lado de la
                  imagen.

                  Este tambien esta a un lado de la imagen, en la linea siguiente.

                  Este otro texto, en cambio, ha buscado el primer margen
                  libre a la izquierda.
                  Otra posibilidad muy interesante es la de utilizar una imagen
                  como enlace a otra página. Para estos casos se utilizan generalmente
                  imágenes pequeñas (iconos), aunque se puede usar cualquier tipo de imagen.
                  entonces convinamos la etiqueta <A>con <IMG> de la siguiente forma:
                  [url=http://www.actionhacks.net/la url]





                  hemos creado tres áreas de vínculo en la imagen image.gif. éstas están
                  agrupadas bajo una etiqueta que las representa en la imagen mediante
                  el atributo usemap de la etiqueta <IMG>. Cada región está definida de
                  manera precisa mediante una etiqueta .
                  La primera área es un rectángulo (con el atributo shape="rect"), cuyas
                  esquinas superior izquierda e inferior derecha están definidas por las
                  coordenadas de píxel (0,0) y (100,100), respectivamente. Su vínculo
                  asociado apunta a la página page1.html.
                  La segunda área es un polígono (con el atributo shape="poly"), cuyos
                  vértices están definidos por las coordenadas (200,200), (200,0), (300,20)
                  y (300,180). La forma que resulta es un trapecio, cuyo lado derecho es
                  menor que el izquierdo. Su vínculo asociado apunta a la página page2.html.
                  La tercera área es un círculo (con el atributo shape="circle"), que tiene
                  un centro definido por las coordenadas (150,150) y un radio de 50 píxeles.
                  Su vínculo asociado apunta a la página page3.html.
                  En todo caso, estas coordenadas se refieren a la imagen; las coordenadas
                  (0,0) indican la esquina superior izquierda de la imagen.
                  tablas
                  Las tablas pueden parecer un modo sencillo de disponer el texto en
                  columnas o quizás de añadir un titular a una ilustración, pero hay
                  modos de sacar un gran partido de una característica aparentemente
                  sencilla. La etiqueta
                  puede ser una poderosa herramienta deformato. Se puede hacer por ejemplo, no mostrar el borde de una tablaen absoluto. Tambien se puede hacer uso de la etiqueta
                  paraubicar texto e imagenes con precisión, en prácticamente casi cualquierlugar de una página.Estructura de una tablaVamos a ver ordenadamente (de fuera hacia dentro) las etiquetasnecesarias para confeccionar las tablas.
                  [resto de las etiquetas]
                  Es la etiqueta general, que engloba a todas las demás.

                  [resto de las etiquetas]
                  Presenta los datos tabulados con un borde, haciendo las tablas más
                  atractivas, y el grosor depende del numero de pixeles.
                  [tr]
                  [etiquetas de las distintas celdas de la primera fila]
                  [/tr]
                  Permite formar cada fila de la tabla. Hay que repetirla tantas
                  veces como filas queremos que tenga la tabla.

                  [td]
                  [contenido de cada celda (imágenes, texto, etc.)]
                  [/td]
                  Permite formar las distintas celdas que contendrá cada fila de
                  la tabla. Hay que repetirlas tantas veces como celdas queramos que
                  tenga la fila.


                  [encabezamiento de tabla]

                  Es utilizada para colocar encabezamientos en negrita sobre las
                  columnas

                  EJEMPLO





                  Columna 1Columna 2Columna 3
                  fila1 - c elda1fila1 - celda2fila1 - celda3
                  fila2 - celda1fila2 - celda2fila2 - celda3

                  [Aquí van las etiquetas que visualizan la página]


                  ¿Qué pasa si el numero de celdas de una fila es distinto al de otra?
                  Pues el navegador forma el número de filas y columnas que haga falta,
                  dejando espacios en blanco en las filas que tengan menos celdas.
                  Titular de tabla
                  Se puede añadir un titulo a la tabla, es decir un texto situado
                  encima de la tabla que indica cuál es su contenido. Se consigue
                  con la etiqueta y . Por ejemplo:
                  Esta es mi primera tabla
                  TITULO
                  Coloca él titulo sobre la tabla.

                  TITULO
                  Coloca él titulo bajo la tabla.

                  Contenido de las celdas
                  Solo se ha puesto hasta ahora en el ejemplo,
                  texto normal dentro de las distintas celdas.
                  Pero se puede poner en ellas cualquier otro elemento de los que van
                  en un documento HTML, como imágenes, enlaces, etc.
                  No hay más que poner dentro de la etiqueta de la celda la etiqueta
                  correspondiente a una imagen, un enlace, etc.
                  EJEMPLOS:
                  Con una imagen
                  Con un enlace
                  Mi página principal

                  Posicionamiento del contenido dentro de la celda
                  Normalmente, el contenido de una celda está alineado a la izquierda.
                  Pero se puede cambiar esto añadiendo dentro de la etiqueta de la celda
                  los siguientes atributos:
                  [td ALIGN="CENTER"]Al centro [/td]
                  [td ALIGN="RIGHT"]A la derecha [/td]
                  Cabecera a la izquierda
                  El alineamiento por defecto en el sentido vertical es en el medio.
                  También se puede cambiar, añadiendo dentro de la etiqueta de la celda
                  los siguientes atributos:
                  [td VALIGN="TOP"]Arriba [/td]
                  [td VALIGN="BOTTOM"]Abajo [/td]
                  Variando las dimensiones de la tabla
                  El navegador se encarga normalmente de dimensionar el tamaño
                  total de la tabla de acuerdo con el número de filas, de columnas,
                  por el contenido de las celdas, espesor de los bordes, etc.
                  A veces nos puede convenir forzarle para que la tabla tenga
                  unas dimensiones totales mayores que las que le corresponden,
                  tanto en anchura como en longitud. Esto se consigue añadiendo dentro
                  de la etiqueta de la tabla los atributos WIDTH y HEIGHT igual a un
                  porcentaje de la dimensión de la pantalla, o a una cifra que equivale
                  al número de pixels.
                  Por ejemplo, si colocamos:
                  O, por ejemplo ponemos:
                  Celdas que abarcan a otras variasA veces puede interesarnos que una celda se extienda sobre otras varias. Esto se consigue añadiendo dentro de la etiqueta de la celda los atributos COLSPAN=número para extenderse sobre un número determinado de columnas, o ROWSPAN=número para extenderse verticalmente sobre un número determinado de filas. Por ejemplo, en la primera tabla del ejemplo anterior vamos a añadir una fila con una sola celda, que abarca a dos columnas: <tr>O, en la misma tabla, vamos a añadir una celda en la primera fila, pero que abarque también a la siguiente: Color de fondo en las tablasPodemos conseguir que las tablas tengan un color de fondo, siguiendo un procedimiento totalmente análogo al empleado para que una página tenga un color de fondo uniforme (como hemos visto en el capítulo 7). Para ello debemos utilizar el atributo BGCOLOR="#XXYYZZ", visto en dicho capítulo. Se puede conseguir: ------------------
                  Celda sobre 2 columnas
                  Celda junto a 2 filas
                  [resto de las etiquetas]
                  La totalidad de la tabla tendrá un color de fondo.

                  [td BGCOLOR="#XXYYZZ"]
                  [contenido de la celda]
                  [/td]
                  Solamente una celda determinada tendrá un color de fondo,
                  distinto al del resto de la tabla.

                  Imágenes de fondo en las tablas :
                  -------------------------------
                  El Explorer de Microsoft soporta la colocación de
                  imágenes de fondo en el interior de las tablas,
                  de una manera análoga a como se hace en una página
                  (según hemos visto en el capítulo 7).

                  Para ello debemos, utilizar el atributo ,
                  BACKGROUND="imagen.gif" o BACKGROUND="imagen.jpg".
                  Si se utiliza dentro de la etiqueta
                  ,la imagen en cuestión se multiplicará detrás de todas las celdas. (Con el Netscape no se verá ninguna imagen de fondo, sólo con el Explorer) Si, por el contrario, sólo se pone este atributo dentro de la etiqueta de una celda concreta (<td>o ),entonces la imagen de fondo se verá sólo en esa celda. Separación entre las celdas de una tabla :----------------------------------------Por defecto, la separación entre las distintas celdas de una tabla es de dos pixels.Pero se puede variar esto con el atributo CELLSPACING, que se pone dentro de la etiqueta TABLE. Por ejemplo, para obtener una separación de 20 pixels entre celdas ponemos: <TABLE border=1 cellSpacing=20>A primera vista parece como si esto fuera lo mismo que si hubiéramos aumentado el espesor de los bordes.Pero para comprobar que no es así, hagamos que, en el caso anterior, tenga además unos bordes de 5 de espesor: </TABLE><TABLE border=5 cellSpacing=20>Separación entre el borde y el contenido dentro de las celdas :Por defecto, la separación entre el borde y el contenido dentro de las celdas es de un pixel. Se puede cambiar esto con el atributo CELLPADDING, que se pone dentro de la etiqueta TABLE. Por ejemplo, para obtener una separación de 20 pixels entre el contenido y los bordes, dentro de cada celda: </TABLE><TABLE border=1 cellPadding=20>Se puede combinar este atributo con CELLSPACING (visto en el apartado anterior). Por ejemplo, una tabla con bordes de 5 de espesor, separación entre celdas de 15 y separación del contenido con respecto a los bordes de las celdas de 20, lo obtendríamos con:</TABLE><TABLE border=5 cellSpacing=15 cellPadding=20>Imagen de fondoNo sólo se colocan imágenes en un texto. Gracias a la etiqueta y a su atributo BACKGROUND, también pueden aparecer como fondo de unapágina.Ejemplo: Se utiliza la imagen background.gif como un diagrama, visualizada demanera repetida en el fondo (como mosaico). Si no se puede encontrar,se visualizará como fondo el color especificado o predeterminado.-------------------------------------------------------------------------------------------------------Espero que os sirva, como ami, de gran ayuda.Un saludo a todos los miembros de actionhacksomg.cat -----¿ Which is the html? --- The HyperText Markup Language, or better known as html. It is a programming language using labels for designing web pages. --------------------------- -----! introduction to html !----- The html language is only for exclusive use Web design, this can be agreed with another language web design called the php but we will have agreed file extension. php. This language (html) is considered one of the language easiest to handle among others, but also very used by people to this day, although it current programs to create web Paguina not forget if you want to learn you have to study HTML. Not that these programs are not used, in fact some sometimes prove helpful, some examples: Front Page, Dreamweaver and others. In general, the html tags used with some or better known as that make the orders mentioned, depending that tag. -------------------------------- -----! requirements to begin !----- We will need to unload to start the program either or since it will use to make our tests the codecs ... (I try to publish as soon as possible the download link of these programs. ) (Also a opccion, locate the program in softonic.com, and from there locate the author of the program And free descargarnolo the website of the author of the program we want: (Front Page or Dreamweaver) ----------------------------------- Let's start -----! !---- The programming with html, follows a sequential process, as if we were writing a letter, but in the case of html not write words. -------------------------------------------------- --- 1. first comes the label expressing the beginning of language until the end of all your codec, Ovbio be closed language with this bar / which expresses the closure of any tag -------------------------------------------------- ---------------- 2. comes after that is where he was heading can put some tricks and within this is a tag that is called it shall be made within the title of the Paguina and put the title after not forget to close the tag</TABLE>
                  [/url]
                </LI>
              </LI>
            </LI>

        </LI>
      </LI>
    </LI>
</I></U>
Back to top Go down
Sponsored content




PostSubject: Re: guide 4 programing whit HTML ----Guia para programar con HTML   

Back to top Go down
 
guide 4 programing whit HTML ----Guia para programar con HTML
Back to top 
Page 1 of 1
 Similar topics
-
» Item Guide--Name and Gifting Level
» Guide: Mystery Manor Achievements: Requirements and Rewards
» Yet another guide to create opening chess book [PolyGlot]
» Excellent New Guide to bookmaking
» Easy Guide to Chess

Permissions in this forum:You cannot reply to topics in this forum
 :: Public Section: Coding :: HTML :: Tutorials-
Jump to: