Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Apuntes HTML

    Cargado por

    Patricia Amézquita
    4 vistas12 páginas

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    DOCX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    4 vistas12 páginas

    Apuntes HTML

    Cargado por

    Patricia Amézquita

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 12

    2.2.

    - Diseñar páginas Web en HTML

    a) ¿Qué es HTML?

    HTML, siglas de HyperText Markup Language («lenguaje de marcas de hipertexto»), hace


    referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que, en sus
    diferentes versiones, define una estructura básica y un código (denominado código HTML) para la
    definición de contenido de una página web, como texto, imágenes, etc. Es un estándar a cargo de la
    W3C, organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre
    todo en lo referente a su escritura e interpretación.

    HTML es el lenguaje con el que se escriben las páginas web. Las páginas web pueden ser
    vistas por el usuario mediante un tipo de aplicación llamada navegador. Podemos decir por lo tanto que
    el HTML es el lenguaje usado por los navegadores para mostrar las páginas webs al usuario, siendo
    hoy en día la interface más extendida en la red.

    b) Características

    El lenguaje HTML se trata de un lenguaje interpretado basado en etiquetas o tags. Mediante


    estas etiquetas indicamos una función o acción determinada. HTML posee una serie de reglas que
    permiten interpretar de forma correcta las instrucciones que se añaden en una determinada página web.

    Por ejemplo, si queremos escribir un texto en negrita, deberemos indicarle al navegador esta
    acción mediante la instrucción oportuna. El navegador la interpretará y nos presentará el texto en
    negrita.

    Al ser HTML un lenguaje interpretado, deberemos de indicarle al navegador dónde comienza o


    finaliza una determinada acción.

    Este lenguaje será el encargado de convertir un simple archivo de texto en una página web con
    diferentes tipos y tamaños de letra, con imágenes impactantes, animaciones sorprendentes, formularios
    interactivos, etc.
    c) Reglas básicas de diseño

    Estructura básica de una página web.

    La estructura básica de una página web es la siguiente:

    <html>
    <head></head>
    <body>
    </body>
    </html>

    Una estructura HTML se empieza con la etiqueta <html> y acaba con </html>.
    Todo lo que esté en medio será la página web.

    Los archivos HTML

     Los archivos HTML deben tener una extensión htm o html (misitio.htm o misitio.html).
     Para crear un archivo HTML solo necesitamos un editor de texto.
     Un archivo HTML está compuesto por etiquetas.
     Las etiquetas le dicen al navegador (Internet Explorer, Firefox, Google Chrome, Opera, Safary,
    etc.) como mostrar la página Web.

    d) Utilizar los elementos básicos de Lenguaje HTML, en la creación de páginas Web:

    Encabezado, insertar imágenes, hipervínculos o enlaces, listas, tablas.

    Encabezado

    <head></head>
    Es el encabezado de la página. Aquí irá cierta información que es directamente el contenido de la
    página. Aquí se pone el título de la página.
    <title></title>
    La línea que dice indica el título de la página (lo que el navegador pone en la parte superior izquierda).
    <body></body>
    Aquí va propiamente el contenido de la página: fotos, párrafos, formularios, etc.
    Dentro de <body></body> distinguimos varias etiquetas:
    <br> Indica salto de línea. En HTML un salto de línea normal (pulsando la tecla Enter) no produce un
    salto de línea en el resultado. Es necesario escribir <br> (u otra etiqueta similar). <b></b> => Indica
    comienzo y fin de negrita. <i></i> => Itálica.

    Ejemplo

    Las etiquetas

    Las etiquetas son marcas insertadas en un documento HTML para proporcionar información
    sobre una unidad o contenido.
     Están encerradas entre los signos "<" y ">".
     Generalmente vienen en pares <p> y <⁄p>.
     La primera es de apertura y la segunda de cierre.
     El texto que se encuentra entre dos etiquetas es el contenido del elemento.
     No son sensibles a las mayúsculas y minúsculas, o sea <b> es lo mismo que <B>.
    Atributos de etiquetas

    Muchas etiquetas que utilizamos llevan atributos. Los mismos que proveen de mayor información a
    los elementos HTML.
     Van con la estructura: nombre="valor".
     Van en la etiqueta de apertura.
     Los valores siempre hay que ponerlos entre comillas.
    Ejemplo
    <body bgcolor="#FFFF00">
    Hola <b>Este texto está en negrita</b>
    </body>
    En la etiqueta <body> se puede observar el atributo bgcolor = (color de fondo) y el valor
    "#FFFF00"(representa el color amarillo en hexadecimal).
    Esto quiere decir que el color de fondo de la página será amarillo.

    Insertar imágenes

    Sintaxis
    <img src="/URL" alt="texto descriptivo">

    Ejemplo 1: <img src="imagenHTML.jpg">

    Donde "imagenHTML.jpg" es la imagen que vamos a poner. La imagen deberá estar


    almacenada en el mismo directorio. En caso que la imagen no esté colocada dentro del
    mismo directorio, podemos usar una ruta:
    <img src="folder/imagenHTML.jpg">

    Ejemplo 2: <img src="imagenHTML.jpg" border="0" width="10"


    height="10" alt=”Imagen”>

    La etiqueta <img> tiene varias propiedades: border, width, height, alt. En esta línea se define
    el borde (border) alrededor de la imagen en pixeles. El ancho y alto (width, height) se coloca
    también en pixeles y deben corresponder al tamaño original de la imagen para que no se
    distorsione. El atributo alt se utiliza para dar una breve descripción de la imagen. Los
    formatos de imagen soportados son jpg, gif y png.

    Propiedades del Texto


    Las propiedades del texto pueden modificarse a través de la etiqueta . Para ello, podemos
    insertar el texto entre las etiquetas y , especificando algunos de los atributos de la etiqueta:

    FACE: nombre de la fuente


    COLOR: color del texto. número hexadecimal o texto predefinido

    SIZE: tamaño del texto. valores del 1 al 7, siendo por defecto el 3, o desplazamiento
    respecto al tamaño por defecto, añadiendo + o - delante del valor

    Por ejemplo, para insertar el texto:

    Bienvenidos al COBACH

    Habría que escribir:

    <font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif">


    Bienvenidos Al COBACH </font>
    También es posible definir una fuente para todo el documento. Para ello, hay que insertar la
    etiqueta <basefont> después de la etiqueta <body>.

    La etiqueta <basefont> no necesita una etiqueta de cierre, y permite modificar los mismos
    atributos del texto que la etiqueta .

    Por ejemplo:

    <body>
    <basefont color="#006699" size="4" face="Arial">
    ...
    Este código haría que la fuente del documento fuera por defecto de color azul, de tamaño 4 y
    Arial. Si después de indicar la etiqueta <basefont> o , el navegador encuentra otra etiqueta ,
    la que prevalece es siempre la última que se encuentra.

    Resaltado del Texto

    <b> negrita

    <i> cursiva

    <u> subrayado

    <s> tachado

    <tt> máquina de escribir máquina de escribir

    <big> aumenta el tamaño de la fuente aumenta el tamaño de la fuente

    <small> disminuye el tamaño de la fuente disminuye el tamaño de la fuente

    Por ejemplo, para insertar el texto:

    Bienvenidos al COBACH

    Habría que escribir:

    <font color="#0000FF" size="4" face="Batang">Bienvenidos al <u>


    <big>COBACH</big></u> </font>

    El Resultado sería:
    Bienvenidos al COBACH
    Para insertar una regla, línea o separador horizontal
    En HTML para crear una línea horizontal utilizamos <hr />

    Si queremos dar color a la línea horizontal lo hacemos así:


    <hr color=” #0056b2" />
    Si queremos variar el grosor de la línea, pondremos: size=”x”, siendo “x” el número de grosor,
    por ejemplo:
    <hr size="7" />
    Si queremos dar color a la línea horizontal y variar el grosor lo hacemos así:
    <hr color=” #0056b2" size=”7” />

    Hipervínculos o enlaces
    Los enlaces nos permiten conectarnos a archivos de:
     Imágenes
     Videos
     Sonidos
     Sitios en la web
     Páginas Web

    Sintaxis
    <a atributo="valor">Texto del enlace</a>

    Ejemplo 1
    Crear una liga a la página del Colegio de Bachilleres:
    <a href="/http://www.cobachih.edu.mx/">Página del Colegio de Bachilleres</a>
    href es la dirección URL (Localizador Uniforme de Recursos) a conectar que en este caso
    es la dirección de la página del Colegio de Bachilleres.

    La etiqueta <a> se cierra con </a>.


    “Página del Colegio de Bachilleres” es el texto visible que permitirá realizar el enlace al
    URL.
    Ejemplo 2
    Crear una liga a un correo electrónico:
    En el momento que presionamos el enlace se abrirá automáticamente el programa de correo
    que tenemos definido por defecto.
    <a href="/mailto: alguien@gmail.com"> Mandar email</a>
    mailto indica la dirección de correo a la que va dirigida alguien@gmail.com.
    Ejemplo 3
    Crear una liga a partir de una imagen:
    Muchas veces queremos usar una imagen como enlace a otro archivo. Para lograr esto
    colocamos la etiqueta <img> entre las etiquetas <a> y </a> en lugar del texto. <a
    href="http://www.google.com/"><img src="/../graficos/google.gif"></a>

    Enlaces internos: anclas

    Las anclas son enlaces hacia un punto determinado dentro de una misma
    página. Se usan para desplazarnos dentro de la misma página por ejemplo al
    inicio o final de la página cuando el texto es extenso se emplean las anclas.

    El punto de destino tiene que estar marcado con el atributo id="nombre " y en
    el enlace se coloca un # (numeral) seguido del “nombre”. Por ejemplo para
    desplazarnos del final de la página al inicio de la misma:

    Primero pondremos el ancla en el lugar a donde queremos que se vaya el


    enlace, en este caso al inicio de la página, y lo hacemos poniendo lo siguiente:

    <p id="Inicio"> </p>

    Al final de la página pondremos el enlace al ancla id=”Inicio” de la siguiente


    manera:

    <a href="#Inicio"> Ir al inicio de la página </ a>


    Listas

    Las listas nos permiten ordenar o enumerar datos o elementos para facilitar su lectura.
    Existen 3 tipos de listas:

     Ordenadas
     Desordenadas
     De definición

    Listas ordenadas
    Son aquellas que ordenan la lista anteponiendo números, letras o signos. Comienzan con la
    etiqueta <ol> y para cada uno de los elementos de la misma, utilizamos la etiqueta <li>.
    Ejemplo

    <ol>
    <li>Ave</li> 1. Ave
    <li>Réptil</li> 2. Réptil
    <li>Mamífero</li> 3. Mamífero
    </ol>

    Listas desordenadas
    Exponen la lista anteponiendo un punto, cuadrado o triángulo negro.

    Comienzan con la etiqueta <ul> y para cada uno de los elementos de la misma utilizamos la
    etiqueta <li>.

    Ejemplo

    <ul>
     Mesa
    <li>Mesa</li>
     Vaso
    <li>Vaso</li>
     Plato
    <li>Plato</li>
    </ul>

    Si agregamos el atributo “ type= circle” cambia la viñeta por un circulo sin relleno y si en
    lugar de circle se pone sqaure pondrá por viñeta un cuadrado

    <UL TYPE=circle>
    <LI> Mesa
    <LI> Vaso
    <LI> Plato
    </UL>
    <UL TYPE=square>
    <LI> Mesa
    <LI> Vaso
    <LI> Plato
    </UL>

    Listas de definición
    Se utilizan para definir términos.
    Las listas de definición se representan con la etiqueta <dl>.Los términos de las mismas con
    <dt>.La definición de esos términos comienza con <dd>.
    Ejemplo
    <dl>
    <dt>Café</dt> Café
    <dd>Elaborado con
    Elaborado con cafeína
    Yogurt
    cafeína</dd>
    Elaborado con lácteos
    <dt>Yogurt</dt>
    <dd>Elaborado con lácteos
    </dd>
    </dl>

    Tablas

    Las tablas son herramientas muy útiles para presentar datos y para el diseño de
    páginas, ubicación de textos y gráficos dentro de las mismas.

    Características de las tablas

     Se definen las tablas con la etiqueta <table>.


     Está dividida en filas definidas con la etiqueta <tr>.
     Cada fila está dividida en celdas definidas con la etiqueta <td>.
     Las celdas pueden contener texto, imágenes, formularios, listas, otras tablas, etc…
    Sintaxis

    <table>
    <tr>
    <td>contenido celda 1</td>
    <td>contenido celda 2</td>
    </tr>
    </table>

    Ejemplo

    <table border="1px">
    <tr>
    <td>Nombre</td>
    <td>Apellido</td>
    </tr>
    <tr>
    <td>Pedro</td>
    <td>Garcia</td>
    </tr>
    </table>

    Bordes de las tablas


    Para poder visualizar los bordes de una tabla, se debe agregar el atributo border junto con el
    valor expresado en pixeles, de otra manera no se verán los bordes que dividen las celdas de la
    tabla.

    Encabezados de las tablas


    Los encabezados de una tabla se definen con la etiqueta <th>.

    Márgenes de las celdas


    Es el espacio que se encuentra entre los bordes de la celda y su contenido.
    Se definen los márgenes con el atributo cellpadding.

    Espaciado entre celdas


    Es el espacio que se encuentra entre celda y celda. El mismo que está definido con el atributo
    cellspacing.
    Ejemplo

    <table border="1px"
    cellspacing="15px">
    <tr>
    <th>Nombre</th>
    <th>Apellido</th>
    </tr>

    <tr>
    <td>Informática</td>
    <td>Matemáticas</td>
    </tr>
    </table>

    Otro ejemplo sería:

    <table border="2px" bgcolor="#27B05D" bordercolor="#FFFFFD"


    cellpadding="1" cellspacing="4" >

    <tr>

    <th> Nombre </th>

    <th> Portada </th>

    <th> Sinopsis </th>

    </tr>

    <tr>

    <td> TITANIC </td>

    <td> <img src="titanic.jpg" alt="Titanic" width="200" height="150"


    border="10" /> </td>

    <td> Jack (DiCaprio), un joven artista, en una partida de cartas gana un pasaje
    para América, en el Titanic, el trasatlántico más grande y seguro jamás
    construido. A bordo, conoce a Rose (Kate Winslet), una joven de una buena
    familia venida a menos que va a contraer un matrimonio de conveniencia con
    Cal (Billy Zane), un millonario engreído a quien sólo interesa el prestigioso
    apellido de su prometida. Jack y Rose se enamoran, pero Cal y la madre de
    Rose ponen todo tipo de trabas a su relación. Inesperadamente, un inmenso
    iceberg pone en peligro la vida de los pasajeros. </td>

    </tr>
    <tr>

    <td> LOS VENGADORES </td>

    <td> <img src="losvengadores.jpg" alt="Los Vengadores" width="200"


    height="150" border="10" /> </td>

    <td> Un enemigo inesperado amenaza con poner en peligro la seguridad


    mundial, así que Nick Fury, Director de la agencia internacional para el
    mantenimiento de la paz conocida con el nombre de SHIELD, necesita
    encontrar urgentemente un equipo que salve al mundo del mayor de los
    desastres. </td>

    </tr>

    < /table >

    El resultado sería:

    También podría gustarte