Scribd Logo
Carica

Benvenuto in Scribd!

  • HTML (Parte 2)

    Caricato da

    Walter Méndez
    57 visualizzazioni91 pagine

    Titolo originale

    HTML (Parte 2).pptx

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formati disponibili

    PPTX, PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato PPTX, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    57 visualizzazioni91 pagine

    HTML (Parte 2)

    Caricato da

    Walter Méndez

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato PPTX, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 91

    Autor: Walter J. Mndez Fuente: w3schools.

    com

    1. 2. 3. 4. 5. 6. 7.

    Cabeceras HTML Introduccin al CSS Imgenes Tablas Listas Bloques Layout

    Ejemplos El elemento <head> El elemento <title> El elemento <base>

    El elemento <link>
    El elemento <style> El elemento <meta> Ejemplos de uso de etiquetas <meta> El elemento <script> Resumen de elementos Head

    <!DOCTYPE html> <html> <head> <title>My first HTML page</title> </head>


    <body> <p>The content of the body element is displayed in the browser.</p> <p>The content of the title element is displayed in the browser's title.</p> </body> </html>

    Use the <base> tag to specify a default URL and a default target for all links on a page.

    <!DOCTYPE html> <html> <head> <base href="http://www.w3schools.com/images/" target="_blank"> </head> <body> <img src="stickman.gif" width="24" height="39"> Notice that we have only specified a relative address for the image. Since we have specified a base URL in the head section, the browser will look for the image at "http://www.w3schools.com/images/stickman.gif" <br><br> <a href="http://www.w3schools.com">W3Schools</a> Notice that the link opens in a new window, even if it has no target="_blank" attribute. This is because the target attribute of the base element is set to "_blank". </body> </html>

    Use <meta> elements to specify a description, keywords, author, and character set of a document.

    <!DOCTYPE html> <html> <head> <meta name="description" content="Free Web tutorials"> <meta name="keywords" content="HTML,CSS,XML,JavaScript"> <meta name="author" content="Hege Refsnes"> <meta charset="UTF-8"> </head> <body> <p>All meta information goes in the head section...</p> </body> </html>

    The <head> element is a container for all the head elements. Elements inside <head>

    can include scripts, instruct the browser where to find style sheets, provide meta information, and more.
    The following tags can be added to the head section: <title>, <style>, <meta>, <link>,

    <script>, <noscript>, and <base>.

    La etiqueta <title> define el

    ttulo del documento. Se requiere el elemento <title> en todos los documentos HTML / XHTML. El elemento <title>: define un ttulo en la barra de herramientas del navegador establece el ttulo de la pgina cuando se aade a favoritos muestra el ttulo de la pgina en los resultados de los motores de bsqueda

    <!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>

    La etiqueta <base> especifica

    la URL base / objetivo para todas las URL relativa en una pgina:

    <head> <base href="http://www.w3schools.com/images/" target="_blank"> </head>

    La etiqueta

    <link> define la relacin entre un documento y un recurso externo.


    El <link> es la

    <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>

    ms utilizada para enlazar a las hojas de estilo:

    La etiqueta <style> se utiliza

    para definir la informacin de estilo para un documento HTML.


    Dentro del elemento <style>

    especificar cmo los elementos HTML debe renderizar en un navegador:

    <head> <style type="text/css"> body {background-color:yellow} p {color:blue} </style> </head>

    Los metadatos son datos (informacin) sobre los datos. La etiqueta <meta> proporciona metadatos sobre el documento HTML. Los

    metadatos no se mostrar en la pgina, pero ser analizable.


    Elementos Meta se utilizan normalmente para especificar de descripcin de pginas,

    palabras clave, autor del documento, ltima modificacin, y otros metadatos.


    Los metadatos pueden ser utilizados por los navegadores (como mostrar contenido o

    recarga de la pgina), los motores de bsqueda (palabras clave), o cualquier otro servicio web.
    etiquetas <meta> siempre van dentro del elemento head.

    Definicin de palabras clave para los motores de bsqueda:

    <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">


    Definir una descripcin de su pgina web:

    <meta name="description" content="Free Web tutorials on HTML and CSS">


    Definir el autor de una pgina:

    <meta name="author" content="Hege Refsnes">


    Actualizar documentar cada 30 segundos:

    <meta http-equiv="refresh" content="30">

    La etiqueta <script> se utiliza para definir un script del lado del cliente, tales como

    JavaScript.
    El elemento <script> ser explicado en un captulo posterior.

    Tag
    <head> <title> <base> <link> <meta> <script> <style>

    Description
    Define la informacin sobre un document HTML Define el ttulo del document Define una direccin por defecto o un objetivo por defecto para todos los vnculos en la pgina Define la relacin entre el document y un recurso externo Define metadatos acerca del documento HTML Define el script del lado del cliente Define informacin del estilo para un documento

    CSS (Cascading Style Sheets) se utiliza para el estilo de los elementos HTML

    Ejercicios Aplicar estilos HTML con CSS Estilos inline Ejemplo de Estilos Color de fondo

    Ejemplo de estilos Fuente, color y tamao


    Ejemplo de estilos Alineacin de texto Hoja de estilo interior Hoja de estilos externa Resumen de etiquetas para estilo Etiquetas y atributos obsoletas

    <!DOCTYPE html> <html> <body> <div style="opacity:0.5;position:absolute;left:50px;width:300px;heigh t:150px;background-color:#40B3DF"></div> <div style="font-family:verdana;padding:20px;borderradius:10px;border:10px solid #EE872A;"> <div style="opacity:0.3;position:absolute;left:120px;width:100px;heig ht:200px;background-color:#8AC007"></div>

    <h3>Look! Styles and colors</h3>


    <div style="letter-spacing:12px;">Manipulate Text</div> <div style="color:#40B3DF;">Colors <span style="backgroundcolor:#B4009E;color:#ffffff;">Boxes</span> </div> <div style="color:#000000;">and more...</div> </div> </body> </html>

    Cmo agregar informacin de

    estilo dentro de la seccin head.

    <!DOCTYPE html> <html> <head> <style type="text/css"> h1 {color:red;} h2 {color:blue;} p {color:green;} </style> </head> <body> <h1>All header 1 elements will be red</h1> <h2>All header 2 elements will be blue</h2> <p>All text in paragraphs will be green.</p> </body> </html>

    Cmo hacer un vnculo que no

    est subrayado, con el atributo de estilo.

    <!DOCTYPE html> <html> <body>


    <a href="http://www.w3schools.com" style="text-decoration:none;">Visit W3Schools.com!</a> </body> </html>

    Cmo utilizar la etiqueta

    <link> vincular a una hoja de estilos externa.

    <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <h1>I am formatted with an external style sheet</h1> <p>Me too!</p> </body> </html>

    CSS se introdujo junto con HTML 4, para proporcionar una mejor manera a los

    elementos HTML de estilo.


    CSS se puede aadir a HTML de las siguientes maneras:
    Inline - utilizando el estilo de atributo en los elementos HTML

    Interno - utilizando el <style> elemento en la seccin head


    Externo - con una CSS externa archivo

    La mejor forma de aadir CSS a HTML, es poner la sintaxis CSS en archivos CSS

    diferentes.

    Un estilo en lnea se puede utilizar si un estilo nico se va a aplicar a una sola

    ocurrencia de un elemento.
    Para utilizar los estilos en lnea, utilice el atributo de estilo en la etiqueta

    correspondiente. El atributo style puede contener cualquier propiedad CSS. El siguiente ejemplo muestra cmo cambiar el color del texto y el margen izquierdo de un prrafo: <p style="color:blue;margin-left:20px;">This is a paragraph.</p>

    La propiedad background-

    color define el color de fondo de un elemento:

    <!DOCTYPE html> <html>

    <body style="background-color:yellow;"> <h2 style="background-color:red;">This is a heading</h2> <p style="background-color:green;">This is a paragraph.</p> </body>


    </html>

    La familia de fuentes, el color

    y las propiedades de font-size define el tipo de letra, color y tamao del texto de un elemento:

    <!DOCTYPE html> <html> <body> <h1 style="font-family:verdana;">A heading</h1> <p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p> </body> </html>

    La propiedad text-align especifica la alineacin horizontal del texto en un elemento:

    <!DOCTYPE html> <html> <body> <h1 style="text-align:center;">Center-aligned heading</h1> <p>This is a paragraph.</p> </body> </html>

    Una hoja de estilo interna se puede utilizar si un solo documento tiene un estilo nico.

    Estilos internos se definen en la seccin head de una pgina HTML mediante la etiqueta <style>, as:

    <head> <style type="text/css"> body {background-color:yellow;} p {color:blue;} </style> </head>

    Una hoja de estilos externa es ideal cuando se aplica el estilo de muchas pginas.

    Con una hoja de estilos externa, puede cambiar el aspecto de un sitio Web completo, cambiando un archivo. Cada pgina debe enlazar a la hoja de estilo con la etiqueta <link>.
    El <link> va dentro de la seccin head:

    <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>

    Tag <style>

    Description Define la informacin de estilo para un documento HTML

    <link>

    Define la relacin entre un document y un recurso externo

    En HTML 4, varias etiquetas y atributos fueron utilizados para los documentos de

    estilo. Estas etiquetas no son compatibles con las nuevas versiones de HTML.
    Evite el uso de los elementos: <font>, <center> y <strike> y los atributos: color y

    bgcolor.

    Ejercicios La etiqueta <img> y el atributo src El atributo alt Alto y ancho de la imagen Consejos Mas ejercicios Resumen de etiquetas

    Paseo por la montaa

    <!DOCTYPE html> <html> <body> <h2>Norwegian Mountain Trip</h2> <img border="0" src=www.w3schools.com/html/images/pulpit.jpg" alt="Pulpit rock" width="304" height="228"> </body> </html>

    <!DOCTYPE html> <html> <body> <p> Una imagen: <img src="smiley.gif" alt="Smiley face" width="32" height="32"></p> <p> Una imagen en movimiento: <img src="hackanm.gif" alt="Computer man" width="48" height="48"></p> <p> Nota Esta es la sintaxis para insertar una imagen en movimiento, es igual a una imagen normal. </p>

    </body> </html>

    <!DOCTYPE html> <html> <body> <p>An image from another folder:</p> <img src="/images/chrome.gif" alt="Google Chrome" width="33" height="32"><p>An image from W3Schools:</p> <img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com" width="104" height="142"> </body> </html>

    En HTML, las imgenes se definen con la etiqueta <img>.

    La etiqueta <img> est vaco, lo que significa que no contiene atributos solamente, y no tiene etiqueta de cierre.
    Para mostrar una imagen en una pgina, es necesario utilizar el atributo src. Src significa "fuente". El valor del atributo src es la direccin URL de la imagen que desea mostrar. Sintaxis para la definicin de una imagen: <img src="url" alt="some_text"> El navegador muestra la imagen donde la etiqueta <img> se produce en el documento. Si pones una etiqueta de imagen entre dos prrafos, el navegador muestra el primer prrafo, la imagen, y luego el segundo prrafo.

    El atributo alt requerida especifica un texto alternativo para una imagen, si la imagen no se puede visualizar. El valor del atributo alt es un texto definido por el autor: <img src="boat.gif" alt="Big Boat"> El atributo alt proporciona informacin alternativa para una imagen si un usuario por alguna razn no puede ver que (debido a la conexin lenta, un error en el atributo src, o si el usuario utiliza un lector de pantalla).

    Los atributos de altura y anchura se utilizan para especificar la altura y la anchura de una imagen. Los valores de los atributos se especifican en pxeles por defecto: <img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228"> Consejo: Es una buena prctica especificar la altura y anchura de los atributos de una imagen. Si se establecen estos atributos, el espacio necesario para que la imagen est reservado cuando se carga la pgina. Sin embargo, sin estos atributos, el navegador no sabe el tamao de la imagen. El efecto ser que el diseo de la pgina va a cambiar durante la carga (mientras que las imgenes de la carga).

    Nota: Si un archivo HTML contiene diez imgenes - once archivos son necesarios

    para mostrar la pgina de la derecha. Cargando imgenes lleva tiempo, as que mi mejor consejo es: Usar las imgenes cuidadosamente.
    Nota: Cuando se carga una pgina web, es el explorador, en ese momento, que se

    obtiene en realidad la imagen de un servidor web y lo inserta en la pgina. Por lo tanto, asegrese de que las imgenes realmente permanecen en el mismo lugar en relacin con la pgina web, de lo contrario sus visitantes tendrn un icono de enlace roto. El icono de enlace se muestra si el navegador no puede encontrar la imagen.

    <!DOCTYPE html> <html> <body> <h4>Image with default alignment (align="bottom"):</h4> <p>This is some text. <img src="smiley.gif" alt="Smiley face" width="32" height="32"> This is some text.</p> <h4>Image with align="middle":</h4> <p>This is some text. <img src="smiley.gif" alt="Smiley face" align="middle" width="32" height="32"> This is some text.</p> <h4>Image with align="top":</h4> <p>This is some text. <img src="smiley.gif" alt="Smiley face" align="top" width="32" height="32"> This is some text.</p>

    <p><b>Note:</b> The align attribute is deprecated in HTML 4, and is not supported in HTML5. Use CSS instead.</p>
    </body> </html>

    <!DOCTYPE html> <html> <body> <p> <img src="smiley.gif" alt="Smiley face" style="float:left" width="32" height="32"> A paragraph with an image. The image will float to the left of this text. </p> <p> <img src="smiley.gif" alt="Smiley face" style="float:right" width="32" height="32"> A paragraph with an image. The image will float to the right of this text. </p> <p><b>Note:</b> Here we have used the CSS "float" property to align the image; as the align attribute is deprecated in HTML 4, and is not supported in HTML5.</p> </body> </html>

    <!DOCTYPE html> <html> <body> <p>Create a link of an image: <a href="default.asp"> <img src="smiley.gif" alt="HTML tutorial" width="32" height="32"></a></p> <p>No border around the image, but still a link: <a href="default.asp"> <img border="0" src="smiley.gif" alt="HTML tutorial" width="32" height="32"></a></p> </body> </html>

    <!DOCTYPE html> <html> <body> <p>Click on the sun or on one of the planets to watch it closer:</p> <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

    <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"> <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm"> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm"> </map> </body> </html>

    Tag <img>

    Description Define una imagen

    <map>
    <area>

    Define un mapa de imagen


    Define un area con vnculo dentro de un mapa de imagen

    Ejercicios Las tablas en HTML Atributo border Encabezados en las tablas Ms Ejercicios Resumen de etiquetas

    <!DOCTYPE html> <html> <body> <p> Each table starts with a table tag. Each table row starts with a tr tag. Each table data starts with a td tag. </p> <h4>One column:</h4> <table border="1"> <tr> <td>100</td> </tr> </table>

    <h4>One row and three columns:</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> </table> <h4>Two rows and three columns:</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table>

    </body> </html>

    Las tablas se definen con la etiqueta <table>.

    La tabla se divide en filas (con la etiqueta <tr>), y cada fila se divide en celdas de datos (con la etiqueta <td>). td es sinnimo de "datos de la tabla," y mantiene el contenido de una celda de datos. Una etiqueta <td> puede contener texto, enlaces, imgenes, listas, formularios, otras tablas, etc.
    Ejemplo de tabla
    <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>

    Si no se especifica un atributo de la frontera, se mostrar la tabla sin fronteras. A veces esto puede ser til, pero la mayora del tiempo, queremos que los mrgenes para mostrar. Para ver una tabla con bordes, especifique el atributo border: <table border="1"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table>

    La informacin de cabecera en una tabla se definen con la etiqueta <th>. Todos los principales navegadores muestran el texto en el elemento <th> en negrita y centrado.
    <table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>

    <!DOCTYPE html> <html> <body> <h4>This table has no borders:</h4> <table> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> <h4>And this table has no borders:</h4> <table border="0"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body> </html>

    <!DOCTYPE html> <html> <body> <h4>Table headers:</h4> <table border="1"> <tr> <th>Name</th> <th>Telephone</th> <th>Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table>

    <h4>Vertical headers:</h4> <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th>Telephone:</th> <td>555 77 854</td> </tr> <tr> <th>Telephone:</th> <td>555 77 855</td> </tr> </table> </body> </html>

    <!DOCTYPE html> <html> <body> <table border="1"> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$50</td> </tr> </table> </body> </html>

    <!DOCTYPE html> <html> <body> <h4>Cell that spans two columns:</h4> <table border="1"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h4>Cell that spans two rows:</h4> <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table> </body> </html>

    <!DOCTYPE html> <html> <body> <table border="1"> <tr> <td> <p>This is a paragraph</p> <p>This is another paragraph</p> </td> <td>This cell contains a table: <table border="1"> <tr> <td>A</td> <td>B</td> </tr>

    <tr> <td>C</td> <td>D</td> </tr> </table> </td> </tr> <tr> <td>This cell contains a list <ul> <li>apples</li> <li>bananas</li> <li>pineapples</li> </ul> </td> <td>HELLO</td> </tr> </table> </body> </html>

    <!DOCTYPE html> <html> <body> <h4>Without cellpadding:</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table>

    <h4>With cellpadding:</h4> <table border="1" cellpadding="50"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html>

    <!DOCTYPE html> <html> <body> <h4>Without cellspacing:</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table>

    <h4>With cellspacing="0":</h4> <table border="1" cellspacing="0"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>With cellspacing="10":</h4> <table border="1" cellspacing="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html>

    Tag

    Description

    <table>
    <th> <tr> <td>

    Define una tabla


    Define una celda de encabezado en una table Define una fila en una table Define una celda en una table

    <caption>
    <colgroup> <col> <thead>

    Define el ttulo o nombre de una tabla


    Especifica un grupo o uno o ms columnas en una table para formateo Especifica las propiedades de la columna para cada columna en <colgroup> Agrupa el contenido de encabezados en una table

    <tbody>
    <tfoot>

    Agrupa el contenido del cuerpo en una table


    Agrupa el contenido del pie en una tabla

    Las listas HTML ms comunes son las listas ordenadas y desordenadas

    Ejercicios Listas no ordenadas Listar ordenadas Listas descriptivas Consejos Ejercicios Resumen de etiquetas

    <!DOCTYPE html> <html> <body> <h4>An Unordered List:</h4> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </body> </html>

    <!DOCTYPE html> <html> <body>

    <h4>An Ordered List:</h4> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>


    </body> </html>

    Una lista desordenada comienza con la etiqueta <ul>. Cada elemento de la lista comienza con la etiqueta <li>. Los elementos de la lista estn marcados con puntos (por lo general pequeos crculos negros). <ul> <li>Coffee</li> <li>Milk</li> </ul> Como el cdigo HTML anterior se ve en un navegador: Caf Leche

    Una lista ordenada comienza con la etiqueta <ol>. Cada elemento de la lista comienza con la etiqueta <li>. Los elementos de la lista estn marcados con los nmeros. <ol> <li>Coffee</li> <li>Milk</li> </ol> Como el cdigo HTML anterior se ve en un navegador: 1.Caf 2.Leche

    Una lista de descripcin es una lista de trminos / nombres, con una descripcin de cada perodo / nombre. La etiqueta <dl> define una lista de descripciones. La etiqueta <dl> se utiliza en conjuncin con <dt> (define los trminos / nombres) y <dd> (describe cada trmino / nombre): <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl>

    Como el cdigo HTML anterior se ve en un navegador:


    Caf - Bebida caliente negro Leche - Bebida fra blanca

    Consejo: En el interior de un elemento de la lista se puede poner el texto, saltos de

    lnea, imgenes, enlaces, otras listas, etc

    <!DOCTYPE html> <html> <body> <h4>Numbered list:</h4> <ol> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>Letters list:</h4> <ol type="A"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol>

    <h4>Lowercase letters list:</h4> <ol type="a"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>Roman numbers list:</h4> <ol type="I"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>Lowercase Roman numbers list:</h4> <ol type="i"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> </body> </html>

    <!DOCTYPE html> <html> <body> <p><b>Note:</b> The type attribute of the ul tag is deprecated in HTML 4, and is not supported in HTML5. Therefore we have used the style attribute and the CSS list-style-type property, to define different types of unordered lists below:</p> <h4>Disc bullets list:</h4> <ul style="list-style-type:disc"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul>

    <h4>Circle bullets list:</h4> <ul style="list-style-type:circle"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> <h4>Square bullets list:</h4> <ul style="list-style-type:square"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> </body> </html>

    <!DOCTYPE html> <html> <body> <h4>A nested List:</h4> <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul> </body> </html>

    <!DOCTYPE html> <html> <body> <h4>A nested List:</h4> <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea <ul> <li>China</li> <li>Africa</li> </ul> </li> </ul> </li> <li>Milk</li> </ul> </body> </html>

    <!DOCTYPE html> <html> <body>


    <h4>A Definition List:</h4> <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> </body> </html>

    Tag
    <ol> <ul> <li>

    Description
    Define una lista ordenada Define una lista no ordenada Define un tem

    <dl>
    <dt> <dd>

    Define una lista descriptiva


    Define un termino/nombre en una lista descriptive Define una descripcin del termino /Nombre en una lista descriptiva

    Elementos HTML se pueden agrupar con <div> y <span>.

    Elementos de Bloque Elementos Inline HTML El elemento <div> El elementos <span> Etiquetas de agrupacin

    Mayora de los elementos HTML se definen como a nivel de bloque o como

    elementos en lnea.
    Elementos a nivel de bloque comienzan normalmente (y final) con una nueva lnea

    cuando se muestra en un navegador.


    Ejemplos: <h1>, <p>, <ul>, <table>

    Los elementos en lnea se visualizan con normalidad sin necesidad de iniciar una

    nueva lnea.
    Ejemplos: <b>, <td>, <a>, <img>

    El elemento <div> HTML es un elemento de bloque que se puede utilizar como un

    contenedor para agrupar otros elementos HTML.


    El elemento <div> no tiene ningn significado especial. Slo que, por tratarse de un

    elemento de bloque, el navegador mostrar un salto de lnea antes y despus de ella.


    Cuando se utiliza junto con CSS, el elemento <div> se puede utilizar para establecer

    los atributos de estilo para grandes bloques de contenido.


    Otro uso comn del elemento <div>, es para el diseo del documento. Sustituye

    a la "vieja manera" de la definicin de diseo con tablas. La utilizacin de elementos <table> para el diseo no es el uso correcto de <table>. El propsito del elemento <table> es para mostrar datos tabulares.

    El elemento HTML <span> es un elemento en lnea que puede ser utilizado como un

    contenedor de texto.
    El elemento <span> no tiene ningn significado especial. Cuando se utiliza junto con CSS, el elemento <span> se puede utilizar para

    establecer los atributos de estilo para las partes del texto.

    Tag <div> <span>

    Description Defines a section in a document (block-level) Defines a section in a document (inline)

    Diseo de pginas web es muy importante para hacer que su sitio web se vea bien. Disea tu diseo web con mucho cuidado.

    Ejercicios Diseos de pgina web Diseos con elementos <div> Diseos con tablas Consejos Resumen de etiquetas Layout

    <!DOCTYPE html> <html> <body> <div id="container" style="width:500px"> <div id="header" style="backgroundcolor:#FFA500;"> <h1 style="margin-bottom:0;">Main Title of Web Page</h1></div> <div id="menu" style="backgroundcolor:#FFD700;height:200px;width:100px;float:lef t;"> <b>Menu</b><br> HTML<br> CSS<br> JavaScript</div>

    <div id="content" style="backgroundcolor:#EEEEEE;height:200px;width:400px;flo at:left;"> Content goes here</div> <div id="footer" style="backgroundcolor:#FFA500;clear:both;textalign:center;"> Copyright W3Schools.com</div> </div> </body> </html>

    <!DOCTYPE html> <html> <body> <table width="500" border="0"> <tr> <td colspan="2" style="backgroundcolor:#FFA500;"> <h1>Main Title of Web Page</h1> </td> </tr> <tr> <td style="backgroundcolor:#FFD700;width:100px;"> <b>Menu</b><br> HTML<br> CSS<br> JavaScript </td>

    <td style="backgroundcolor:#eeeeee;height:200px;width:400 px;"> Content goes here</td> </tr> <tr> <td colspan="2" style="backgroundcolor:#FFA500;text-align:center;"> Copyright W3Schools.com</td> </tr> </table> </body> </html>

    La mayora de los sitios web han puesto su contenido en mltiples columnas

    (formateado como una revista o un peridico).


    Varias columnas se crean mediante <div> o elementos <table>. CSS se utiliza para

    colocar los elementos, o para crear fondos o aspecto colorido para las pginas.
    A pesar de que es posible crear diseos bonitos con tablas HTML, tablas fueron

    diseadas para presentar datos de tabla - no como una herramienta de diseo!

    <!DOCTYPE html> <html> <body> <div id="container" style="width:500px"> <div id="header" style="backgroundcolor:#FFA500;"> <h1 style="margin-bottom:0;">Main Title of Web Page</h1></div> <div id="menu" style="backgroundcolor:#FFD700;height:200px;width:100px;float:left ;"> <b>Menu</b><br> HTML<br> CSS<br> JavaScript</div> <div id="content" style="backgroundcolor:#EEEEEE;height:200px;width:400px;float:left ;"> Content goes here</div> <div id="footer" style="backgroundcolor:#FFA500;clear:both;text-align:center;"> Copyright W3Schools.com</div> </div> </body> </html>

    El elemento div es un elemento de bloque

    se utiliza para agrupar los elementos HTML.


    El ejemplo siguiente utiliza cinco

    elementos div para crear un diseo de varias columnas, creando el mismo resultado que en el ejemplo anterior:

    Una manera simple de crear diseos es el uso de la etiqueta <table> HTML. Varias columnas se crean mediante <div> o elementos <table>. CSS se utiliza para

    colocar los elementos, o para crear fondos o aspecto colorido para las pginas.
    Usando <table> para crear un buen diseo no es el correcto uso del elemento. El

    propsito del elemento <table> es para mostrar datos tabulares!

    <!DOCTYPE html> <html> <body> <td style="background<table width="500" border="0"> color:#EEEEEE;height:200px;width:400px;"> <tr> Content goes here</td> <td colspan="2" style="background-color:#FFA500;"> </tr> <h1>Main Title of Web Page</h1> </td> <tr> </tr> <td colspan="2" style="background-color:#FFA500;textalign:center;"> <tr> Copyright W3Schools.com</td> <td style="background-color:#FFD700;width:100px;"> </tr> <b>Menu</b><br> </table> HTML<br> CSS<br> </body> JavaScript </html> </td>

    Consejo: La mayor ventaja de utilizar CSS es que, si se coloca el cdigo CSS en una

    hoja de estilos externa, su sitio ser mucho ms fcil de mantener. Usted puede cambiar el diseo de todas las pginas de la edicin de un archivo. Para obtener ms informacin acerca de CSS, estudiar nuestro tutorial CSS .
    Consejo: Debido a diseos avanzados toman tiempo para crear, una opcin ms

    rpida es utilizar una plantilla.Bsqueda de Google para las plantillas de sitio web gratuito (estos son diseos de pgina web predefinidos que puede utilizar y personalizar).

    Tag <div> <span>

    Description Defines a section in a document (block-level)

    Potrebbero piacerti anche