Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • HTML1OK

    Cargado por

    kraven Schnedier Stroheim
    6 vistas5 páginas

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    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 PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    6 vistas5 páginas

    HTML1OK

    Cargado por

    kraven Schnedier Stroheim

    Copyright:

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

    IESTP MSC Diseo Web

    Lic. Mayra Orellana 1


    Estructura interna de una pgina HTML.
    Las instrucciones HTML estn encerradas entre los caracteres: < y >.
    Muchos elementos HTML requieren una marca de comienzo y otra de finalizacin. Todo aquello que est
    fuera de las marcas del lenguaje se imprime en la pantalla (dentro del navegador).
    La estructura bsica de una pgina HTML es:
    <html>
    <head>
    </head>
    <body>
    Cuerpo de la pgina.
    </body>
    </html>
    Una pgina HTML es un archivo que generalmente tiene como extensin los caracteres html . Por ejemplo
    podemos llamar a nuestra primer pgina con el nombre: pagina1.html
    Estos son los elementos bsicos que toda pgina HTML debe llevar.
    Si observamos toda pgina comienza con la marca:<html> y finaliza con la marca:</html>
    Los fines de marcas tienen el mismo nombre que el comienzo de marca, ms el caracter /
    Una pgina HTML tiene dos secciones muy bien definidas que son la cabecera:
    <head>
    </head>
    Y el cuerpo de la pgina:
    <body>
    Cuerpo de la pgina.
    </body>
    Todo el texto que dispongamos dentro del <body> aparece dentro del navegador tal cual lo hayamos escrito.
    Todas las pginas tiene como mnimo esta estructura: cabecera y cuerpo.

    Problema:
    Confeccionar una pgina que muestre los nombres de 5 lenguajes de programacin separados por un
    guion.
    Confeccione una pgina con las marcas mnimas que debe tener y en el cuerpo de la misma escriba
    su nombre y apellido.


    Salto de lnea <br>
    Todo el texto que disponemos en el cuerpo de la pgina aparece en la misma lnea, no importa si cuando
    tipeamos la pgina disponemos cada palabra en una lnea distinta (es decir un navegador no tiene en cuenta
    la tecla ENTER).
    Para indicarle al navegador que queremos que contine en la prxima lnea debemos hacerlo con el
    elemento HTML </br>.
    IESTP MSC Diseo Web


    Lic. Mayra Orellana 2
    Cuando aparece la marca </br> el navegador continua con el texto en la lnea siguiente.
    EJEMPLO: Implementemos una pgina que muestre los nombres de distintos lenguajes de programacin
    uno por lnea:
    <html>
    <head>
    </head>
    <body>
    PHP</br>
    JavaScript</br>
    Java</br>
    C<br>
    C++
    </body>
    </html>

    Prrafo <p>
    Un prrafo es una oracin o conjunto de oraciones referentes a un mismo tema. Todo lo que encerremos
    entre las marcas <p> y </p> aparecer separado por un espacio con respecto al prximo prrafo.
    Dentro de un prrafo puede haber saltos de lnea </br>.
    Veamos con un ejemplo como disponer dos prrafos:
    <html>
    <head>
    </head>

    <body>
    <p> SQL, Structure Query Language (Lenguaje de Consulta Estructurado) es
    un lenguaje de programacion para trabajar con base de datos relacionales como
    MySQL, Oracle,
    etc.</br> MySQL es un interpretador de SQL, es un servidor de base de datos.</br>
    MySQL permite crear base de datos y tablas, insertar datos, modificarlos,
    eliminarlos,ordenarlos, hacer consultas y realizar muchas operaciones, etc.,
    resumiendo: administrar
    bases de datos.
    </p>

    <p>Este tutorial tiene por objetivo acercar los conceptos iniciales para
    introducirse en el mundo de las bases de datos.</p>
    </body>
    </html>
    IESTP MSC Diseo Web


    Lic. Mayra Orellana 3
    Cuando modificamos la ventana del navegador los prrafos se acomodan automticamente de acuerdo al
    ancho de la ventana.
    Para recordar el nombre de esta marca HTML:
    <p> viene de paragraph

    Ttulos <h1><h2><h3><h4><h5><h6>
    Otros elementos HTML muy utilizados son para indicar los ttulos, para esto contamos con los elementos:
    <h1><h2><h3><h4><h5><h6>
    El ttulo de mayor nivel es <h1>, es decir el que tienen una fuente mayor (veremos que es el navegador el
    responsable de definir el tamao de la fuente, ms adelante podr ver que uno puede modificar la fuente,
    tamao, color etc.)
    Segn la importancia del ttulo utilizaremos alguno de estos elementos HTML. Requiere la marca de cerrado
    del ttulo con la barra invertida como hemos visto.
    Confeccionaremos una pgina que contenga un ttulo de primer nivel <h1> y luego dos ttulos de
    nivel <h2>. Definiremos un prrafo para cada ttulo de segundo nivel.

    Cada ttulo aparece siempre en una lnea distinta, no importa si lo tipeamos seguido en el archivo, es decir
    el resultado ser igual si hacemos:
    <h1>Tipos de datos en MySQL</h1>
    <h2>varchar</h2>
    o esto:
    <h1>Tipos de datos en MySQL</h1><h2>varchar</h2>
    El navegador dispone cada ttulo en una lnea nueva.
    IESTP MSC Diseo Web


    Lic. Mayra Orellana 4
    Recordemos que el HTML no tiene la responsabilidad de indicar el tamao de las fuentes. El navegador
    definir el tamao de fuente segn el nivel de ttulo que indiquemos. La de tamao ms grande es la de
    nivel 1 <h1>.
    <h1> viene de heading
    heading significa ttulo.

    Problema:Confeccionar el titular de un peridico con un ttulo de nivel 1. Luego definir dos ttulos de
    segundo nivel con los textos (Noticias polticas y Noticias deportivas), en cada una de estas secciones
    definir dos titulares de tercer nivel con un prrafo cada una. Al final de la pgina mostrar un ttulo de cuarto
    nivel con el nombre de la empresa propietaria del peridico.


    Enfasis (<em> <strong>)
    Enfatizar algo significa realzar la importancia de una cosa, por ejemplo una palabra o conjunto de
    palabras.
    As como tenemos seis niveles de ttulos para enfatizar un bloque contamos con dos elementos que son
    (<em> <strong>)
    El elemento de mayor fuerza de nfasis es strong y le sigue em
    Veamos un ejemplo del empleo de estos dos elementos HTML:

    Podemos ver que la sintaxis para el elemento strong es:
    <strong>Tpos de datos</strong>
    La mayora de los navegadores muestran el texto enfatizado con strong con un texto en negrita y para el
    elemento em utilizan letra itlica (de todos modos esto no es obligatorio, pero seguramente mostrarn los
    textos enfatizados).
    IESTP MSC Diseo Web


    Lic. Mayra Orellana 5
    Otra cosa importante que podemos hacer notar es que estos elementos HTML no producen un salto de
    lnea como los de ttulo (h1,h2 etc.)
    Para recordar el nombre de estos elementos HTML:
    <em> viene de empathize que significa nfasis.
    <strong> viene de strong que significa fuerte.

    Problema: Crear una pgina que contenga cuatro prrafos. En el primero enfatizar con el mximo nivel y
    en los otros prrafos emplear el elemento de enfatizar de menor fuerza.

    Problema:Confeccionar una pgina que muestre la definicin de tres palabras. Aplicar el elemento strong
    a cada palabra previo a su definicin. Luego agregar el elemento em a una o a un conjunto de palabras
    dentro de la definicin.

    También podría gustarte