|
| | guide 4 programing whit HTML ----Guia para programar con HTML | |
| | Author | Message |
---|
omg.cat VIP LVL-4
Posts : 22 Reputation : 6 Join date : 2009-11-15 Age : 54 Location : Bcn -Spain
| Subject: 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
- la etiqueta
produce una lista de palabras con numeros ordenadamente, y cada palabra se define por la etiqueta
ejemplo: escribes
- tu nombre:
- tu apellido:
- 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. Es la etiqueta general, que engloba a todas las demás.
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 3fila1 - c elda1 | fila1 - celda2 | fila1 - celda3 | fila2 - celda1 | fila2 - celda2 | fila2 - 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:
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>Celda sobre 2 columnas | O, en la misma tabla, vamos a añadir una celda en la primera fila, pero que abarque también a la siguiente: Celda junto a 2 filas | 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: 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
label produces a list of words numerous computers, and each word is defined by the label
- example: write
- your name:
- your name:
- 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> | |
| | | chitoredhead General Member
Posts : 44 Reputation : 0 Join date : 2009-12-06
| Subject: 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 | |
| | | omg.cat VIP LVL-4
Posts : 22 Reputation : 6 Join date : 2009-11-15 Age : 54 Location : Bcn -Spain
| Subject: 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 | |
| | | chitoredhead General Member
Posts : 44 Reputation : 0 Join date : 2009-12-06
| Subject: Re: guide 4 programing whit HTML ----Guia para programar con HTML Sat Dec 19, 2009 2:25 pm | |
| | |
| | | omg.cat VIP LVL-4
Posts : 22 Reputation : 6 Join date : 2009-11-15 Age : 54 Location : Bcn -Spain
| Subject: 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
- la etiqueta
produce una lista de palabras con numeros ordenadamente, y cada palabra se define por la etiqueta
ejemplo: escribes
- tu nombre:
- tu apellido:
- 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 --------------------------------------------------------------------- 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. Es la etiqueta general, que engloba a todas las demás.
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 3fila1 - c elda1 | fila1 - celda2 | fila1 - celda3 | fila2 - celda1 | fila2 - celda2 | fila2 - 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
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:
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>Celda sobre 2 columnas | O, en la misma tabla, vamos a añadir una celda en la primera fila, pero que abarque también a la siguiente: Celda junto a 2 filas | 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: ------------------ 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> | |
| | | Sponsored content
| Subject: Re: guide 4 programing whit HTML ----Guia para programar con HTML | |
| |
| | | | guide 4 programing whit HTML ----Guia para programar con HTML | |
|
| Permissions in this forum: | You cannot reply to topics in this forum
| |
| |
| |
|