Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Taller 1 Principios de HTML

    Încărcat de

    rosalba rozo
    8 vizualizări10 pagini
    primeros pasos en html

    Drepturi de autor

    © © All Rights Reserved

    Formate disponibile

    PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document
    primeros pasos en html

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    8 vizualizări10 pagini

    Taller 1 Principios de HTML

    Încărcat de

    rosalba rozo
    primeros pasos en html

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 10

    HTML

    Comprende lo que es el HTML. Este es el lenguaje de codificación con el cual se hacen


    las páginas web.

    1. Inicia tu página web

    Para escribir en HTML, es usan etiquetas de apertura, así: <____>. Una etiqueta de
    cierre se verá así: </____>. Al final, reemplazarás el "____" por un código.

    Donde se escribe el código hay muchos editores pero para nuestro caso se utilizara el
    bloc de notas

    2. Ve a Inicio > Programas > Accesorios > Bloc de Notas.

    Otro programa que puedes usar es el Bloc de Notas++ (lo puede descargar gratis por
    Internet). En este bloc todo lo que escribas estará automáticamente conectado con
    diversos colores, de esta manera será muchísimo más fácil corregir posibles errores.

    3. Dile al navegador qué lenguaje vas a usar. Escribe <html>. Esta es la primera
    etiqueta que deberás escribir, la cual le indica a la computadora que empezarás a hacer
    una página web. También se cerrará al final, así que al final del documento, ciérralo con
    </html>. Esto finalizará la página web.
    4. Escriba el encabezado (head) de la página como se muestra en el gráfico.

    5. Ponle un título a la página. El título es importante, porque les dará a los usuarios una
    idea del tema de la página. Además, cuando los usuarios le pongan un marcador al sitio,
    el título es lo que único que verán en su lista de marcadores. El código HTML para el título
    es: <title>. Ciérralo al final del título escribiendo </title>. El título solo se mostrará en la
    pestaña, no será el título de la página en sí.
    6. Haz el cuerpo de la página. Escribe <body> para abrir la etiqueta del cuerpo. Luego
    ciérrala con la etiqueta </body>. La información para la página web irá entre <body> y
    </body>.

    7. Para colocar el título de la página, inicias con la etiqueta <h>, recuerda cerrarla </h>. El
    título estará en medio de las dos etiquetas. Se pueden definir seis niveles de titulares,
    <H1>.....</H1> hasta <H6>.....</H6> que a su vez determinan el tamaño de la letra.
    Para darle un color de fondo a la página, podrás añadirle un estilo al cuerpo. En vez de
    solamente escribir, escribe <body style="background: #963636">. Podrás probar con un
    color distinto o incluso con un código hexadecimal.

    Página para revisar los códigos de colores: http://html-color-codes.info/codigos-de-


    colores-hexadecimales/

    Si deseas cambiar el color de la fuente debes escribir el siguiente:

    <span style="color:#80BFFF">

    Para cambiar el color de la letra, de un título especifico, debe escribir la etiqueta <FONT
    COLOR= “ White”> TEXTO </FONT>.

    Se verá así:
    8. Escribe unas cuantas líneas de texto entre las etiquetas de cuerpo.

    Para que el texto siga en la línea siguiente (como si presionaras "Enter" en el teclado),
    escribe: <br>.

    9. Añade algunas imágenes. Si quieres colocar alguna imagen de Internet a tu página


    web, el código HTML para las imágenes será: <img src="URL">. La etiqueta de clausura
    es: </img>, pero es opcional.
    Guarda tu trabajo. Ve a "Guardar como", ingresa un nombre de archivo que termine en la
    extensión .html (por ejemplo: "archivodeprueba.html") y escoge "Todos los archivos" o
    "text" en Tipo de archivo. No funcionará si no se siguen estos pasos. Ahora ve adonde lo
    hayas guardado y haz doble clic para abrirlo. Tu navegador predeterminado se abrirá con
    tu propia página web.
    HTML

    Regla Horizontal
    El elemento que suele utilizarse para separar secciones dentro de una misma página es la
    regla horizontal. Se emplean las siguientes etiquetas <hr>. Esta etiqueta no necesita
    etiqueta de cierre.

    Atributos para esta etiqueta

    Atributo Significado Posibles valores

    alineación de la left (izquierda)


    align regla dentro de right (derecha)
    la página center (centro)

    un número, acompañado de % cuando se


    width ancho de la regla
    desee que sea en porcentaje
    size alto de la regla un número
    eliminar el
    noshade sombreado de la no puede tomar valores
    regla

    Texto

    Las propiedades del texto pueden modificarse, a través de la etiqueta <Font> y </Font>,
    esta cuenta con algunos atributos.

    Atributo Significado Posibles valores

    face fuente nombre de la fuente, o fuentes


    color color del texto número hexadecimal o texto predefinido

    valores del 1 al 7, siendo por defecto el 3,


    size tamaño del texto o desplazamiento respecto al tamaño por defecto,
    añadiendo + o - delante del valor

    Ejemplo

    <h1 align="center"><FONT COLOR="RED" FACE="COMIC SANS MS"> MI PÁGINA


    WEB </h1></font>

    A continuación se muestran algunas etiquetas asociadas al tipo de letra:

    Etiqueta Significado

    <strong> negrita

    <i> cursiva

    <u> subrayado

    <s> tachado

    <tt> teletipo (máquina de escribir)

    <big> aumenta el tamaño de la fuente

    <small> disminuye el tamaño de la fuente

    Ejemplo:

    <h1 align="center"><FONT COLOR="RED" FACE="COMIC SANS MS"> <u> MI PÁGINA


    WEB </u> </h1></font>

    También es posible incluir estas etiquetas entre las etiquetas de párrafos, así:

    <p> Esta <b> página </b> se construye con el propósito de aprender HTML </p>

    La palabra página se visualiza en negrita dentro del párrafo.

    Para definir una fuente para todo el documento, se utiliza la etiqueta <basefont>. Esta no
    necesita etiqueta de cierra, y se debe ubicar después de la etiqueta <body>
    PÁRRAFOS

    Los se pueden agrupar en párrafos, mediante las etiquetas <p> y </p>. La alienación de
    los párrafos se puede cambiar por los valores align cuyos valores pueden
    ser left (izquierda), right (derecha), center (centrado) o justify (justificado). Ejemplo:

    Programa ingeniería de sistema

    Distribuido en 10 semestres, se cursa en jornada nocturna y diurna.

    <p align="center"> Programa ingeniería de sistema</p>


    <p> Distribuido en 10 semestres, se cursa en jornada nocturna y diurna.</p>

    MARQUESINAS

    Las marquesinas son líneas de texto que pueden desplazarse de un lado a otro de la
    ventana en forma de línea. Para insertar una marquesina, es necesario insertar el texto
    entre las etiquetas <marquee> y </marquee>.

    Atributos:

    A través del atributo behavior puede modificarse el tipo de movimiento. Puede tomar los
    valores:

     Alternate (de lado a lado de la ventana, como si rebotara en los extremos),


     Scroll (de un lado a otro, continuamente)
     Slide (de un lado a otro, pero una sola vez).

    A través del atributo direction puede modificarse la dirección en la que se moverá el


    texto. Puede tomar los valores de:

     Down (de arriba a abajo)


     Up (de abajo a arriba)
     left (de derecha a izquierda)
     Left (de izquierda a derecha).

    También es posible establecer un color de fondo, a través del atributo bgcolor.

    Ejemplo
    Hipervinculos

    Es un enlace que al ser pulsado lo lleva a una página o archivo. Para ello se emplean las
    etiquetas <a> </a>

    Atributo: href

    Ejemplo

    Para insertar la página www.google.com se debe colocar

    <a href= “URL”> nombre de la página </a>, Así:

    <a href= “https://www.google.com.co”> Buscador de google </a>

    Si se quiere que el enlace abra en una nueva pestaña, se usa el atributo target y el valor
    _blank, así:

    <a href=” https://www.google.com.co” target= “blank”> Buscador de google </a>

    Hipervínculos con Imágenes

    Para crear enlaces con imágenes se debe colocar lo siguiente:

    <a href="www.eltiempo.com" target ="_blank" ><img src=F:HTML/imagen El Tiempo.png" border="4" ></a>

    IMÁGENES

    Como se vio en la anterior clase, para insertar imágenes, se usa la etiqueta <img>, la cual
    no requiere de etiqueta de cierre.

    Para insertar una imagen, seria así:

    <img src= F:/HTML/imagen El tiempo.png" align= RIGHT>

    Esta etiqueta está acompañada de los siguientes atributos:

    src: Atributo obligatorio, indica el nombre del archivo.

    Align: Alineación de la imagen con respecto a una línea del texto.

    Width: Ancho de la imagen (opcional)

    Height: Alto de la imagen (opcional)

    Border: Ancho del borde que se le coloca a la imagen

    El valor que pueden tomar los atributos width y height ha de ser un número,
    acompañado de % cuando se desee que sea en porcentaje con respecto a la página.

    Ejemplo:
    <a href="http://www.eltiempo.com"><img src="c:\imagen/tiempo.jpg" border="0"
    width=15% ></a>

    S-ar putea să vă placă și