Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Curso HTML

    Enviado por

    Marissa Hernandez De Mancisidor
    18 visualizações41 páginas

    Direitos autorais

    © Attribution Non-Commercial (BY-NC)

    Formatos disponíveis

    PPTX, PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato PPTX, PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    18 visualizações41 páginas

    Curso HTML

    Enviado por

    Marissa Hernandez De Mancisidor

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato PPTX, PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 41

    DIPLOMADO EN PROGRAMACIN WEB

    INTRODUCCION AL LENGUAJE HTML


    Qu son los archivos HTML?
    HTML (HyperText Markup Language) o "Lenguaje para Marcado de Hipertexto". Los archivos HTML deben tener una extensin htm o html. Para crear un archivo HTML solo hace falta un editor de texto. Un archivo HTML est compuesto por etiquetas. Las etiquetas le dicen al navegador(Ej: Internet Explorer, Firefox, Mozilla, etc.) como mostrar la pgina.

    En Windows, abra el "Block de Notas". Escriba en el mismo, el siguiente texto:

    Vamos a hacer una pequea prueba!

    <html> <head> <title>Mi primera pgina Web</title> </head> <body> Hola a todos. </body> </html>
    Guarde el archivo como "pagina1.htm" (las extensiones ".htm" o ".html" tienen el mismo significado y nos indican que se trata de un archivo HTML).

    Abra el navegador Internet. Seleccione Archivo" y luego Abrir". Se abrir una ventana, seleccione Examinar" y ubique el archivo que acaba de guardar -"pagina1.html"- eljalo y presione Abrir". Ahora usted ve la direccin, por ejemplo "C:\My Documents\pagina1.htm". Presione Aceptar" y el navegador mostrar la pgina.

    Expliquemos el ejemplo
    La primera etiqueta del archivo es <html>. Esto le indica al navegador que se trata de un archivo HTML. Para cerrar el archivo usamos </html>. Luego vemos la etiqueta <head>. Lo que sigue a continuacin hasta su cierre </head>, no se muestra en la pantalla y es la cabecera del documento. Aqu colocamos informacin tal como el ttulo, palabras claves para los motores de bsqueda y otros datos del documento. Lo que esta escrito entre las etiquetas <title> y </title>, es el ttulo del archivo. Todo lo que aparece en la pantalla, se encuentra entre las etiquetas <body> y </body>.

    Etiquetas de HTML
    Las etiquetas estn encerradas entre los signos "<" y ">". Las etiquetas 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. Las etiquetas no son sensibles a las maysculas y minsculas, o sea <b> es lo mismo que <B>.

    Elementos de HTML
    Veamos con este ejemplo los elementos de HTML.
    <html> <head> <title>Una pgina Web</title> </head> <body> Hola a todos. <b>Este texto es en negrita</b> </body> </html>

    Este es un elemento HTML: <b>Este texto es en negrita.</b> El elemento HTML comienza con la etiqueta de apertura <b>(etiqueta que nos muestra el texto en negrita). El contenido de dicho elemento es: Este texto es en negrita. El fin del elemento HTML es con la etiqueta de cierre</b>. Otro elemento HTML en el ejemplo es: <body> Hola a todos. <b>Este texto es en negrita</b> </body> EL elemento HTML comienza con la etiqueta de apertura <body>(etiqueta que define el cuerpo del documento). El contenido de dicho elemento es: Hola a todos. <b>Este texto es en negrita.</b>. El fin del elemento HTML es con la etiqueta de cierre</body>.

    Qu son los atributos de las etiquetas?


    Muchas etiquetas llevan atributos. Los mismos proveen de mayor informacin a los elementos HTML. Los atributos siempre van con la estructura: nombre="valor". Los atributos siempre van en la etiqueta de apertura. Los valores siempre hay que ponerlos entre comillas. Un ejemplo de los atributos sera: <body bgcolor="#FFFF00"> Hola a todos. <b>Este texto es en negrita</b> </body>

    En la etiqueta <body> podemos 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 pgina ser amarillo.

    Headings(Encabezados)
    Nos definen el tamao de un ttulo o cabecera. <h1> nos d el tipo de letra ms grande. <h6> nos d el tipo de letra ms pequeo. HTML agrega automaticamente un espacio antes y despus de cada ttulo. <h1> al ser usado como ttulo de una pgina Web, es de suma importancia ya que es uno de los parmetros que Google tiene en cuenta a la hora de indexar su sitio.

    Cdigo <html> <head> <title>Headings</title> </head>


    <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> </body> </html>

    Prrafos
    Los prrafos se definen con la etiqueta <p>. Cdigo <html> <head> <title>Prrafos</title> </head> <body> <p>Este es el primer prrafo.</p> <p>Y este es el segundo prrafo.</p> </body> </html>

    Comentarios La etiqueta <!-- ... --> se utiliza para insertar un comentario dentro del cdigo que estamos escribiendo. El mismo es ignorado por el navegador al momento de leerlo. Los comentarios nos sirven para explicar mejor el cdigo y son de gran ayuda en el momento que necesitemos editarlo. <!-- Esto es un comentario. --> * Note que el signo de exclamacin se coloca solo al principio del cdigo. Salto de lnea El salto de lnea est definido con la etiqueta <br>. Es utilizado cuando queremos terminar una lnea sin necesidad de terminar con el prrafo. La etiqueta <br> obliga a saltar de lnea dondequiera que la ubiquemos. Cdigo <p>Esto es <br> un salto de l<br>nea.</p> La etiqueta <br>no tiene cierre.

    Trazar una lnea La etiqueta <hr> nos permite trazar una lnea horizontal como las que separan las distintas secciones de este tutorial. La etiqueta <hr> no tiene cierre. Cdigo <hr>

    Formato bsico del texto


    Cdigo <b>Texto en negrita</b> <big>Texto grande</big> <em>Texto enfatizado</em> <i>Texto en itlica</i> <small>Texto pequeo</small> <strong>Texto fuerte</strong> <sub>Texto por debajo</sub> <sup>Texto por encima</sup> <ins>Texto subrayado</ins> <del>Texto tachado</del> <tt>Texto teletipo</tt>

    Vnculos en HTML
    Los vnculos nos permiten conectarnos con otros documentos (una imagen, una pelcula, un archivo de sonido, etc.) o sitios en la web (otra pgina web). Para ello debemos usar la etiqueta <a> que viene de la palabra anchor (ancla).

    La etiqueta <a> tiene como cierre </a>


    Veamos un ejemplo Vamos a crear un vnculo hacia la home de cybercomxal.com Cdigo <a href="http://www.cybercomxal.com/">La home de cybercomxal</a> .

    EL atributo target Se utiliza para definir donde queremos que se abra el documento conectado. El ejemplo de abajo abrir el documento en una nueva pgina del navegador.
    Cdigo

    <a href="http://www.cybercomxal.com/" target="_blank"></a>

    Creando un enlace a un email Se utiliza en caso que queramos que un enlace mande un email. Cdigo <a href="mailto:alguien@yahoo.com">Mandar email</a> mailto: nos indica la direccin email a la que va dirigida. Un enlace a partir de una imagen Muchas veces queremos usar una imagen como enlace a otro documento. Para ello debemos colocar la etiqueta <img> entre las etiquetas <a> y </a> en lugar del texto. Cdigo <a href="http://www.google.com/"><img src="../graficos/google.gif"></a>

    Qu son los marcos?


    Los frames (marcos en espaol) permiten a los autores presentar documentos con vistas mltiples. Esto posibilita mantener cierta informacin visible mientras otras vistas se desplazan o se sustituyen. Cada vista es un documento independiente de los otros.

    La etiqueta frameset
    La etiqueta <frameset> se usa para dividir la ventana en marcos. Cada frameset define un grupo de filas y columnas. <frameset rows="30%,70%" cols="33%,34%,33%"> ...el resto de la definicin... </frameset>

    Este ejemplo crea una cuadrcula de 2x3 subespacios. Rows: filas Cols: columnas

    La etiqueta frame
    etiqueta <frame> define que documento colocaremos en cada frame. <frameset cols="25%,75%"> <frame src="frame1.htm"> <frame src="frame2.htm"> </frameset> En el ejemplo dividimos la pantalla en una columna de 25% y otra de 75%. La primer columna contiene el documento "frame1.htm" y la segunda columna el documento "frame2.htm".

    La etiqueta iframe
    La etiqueta iframe se usa para crear un frame en lnea que contiene otro documento. Cdigo

    <iframe src="http://www.cybercomxal.com" width="100%"> </iframe>

    Qu son las tablas de HTML?


    Las tablas son una herramienta muy til para presentar datos de tablas y para el diseo de texto y grficos de una pgina HTML.

    Caractersticas de las tablas


    Definimos las tablas con la etiqueta <table>. La tabla est dividida en filas definidas con la etiqueta <tr>. Y a su vez cada fila dividida en celdas definidas con la etiqueta <td>. Las celdas pueden contener texto, imgenes, formularios, listas, otras tablas, etc.

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

    Bordes de las tablas


    Para que se visualicen los bordes de una tabla, debemos agregar el atributo border, de lo contrario no se vern los bordes que dividen las celdas de la tabla. Cdigo <table border="3"> <tr> <td>Borde</td> <td>3 pixels</td> </tr> </table>

    Encabezados de las tablas


    Los encabezados de una tabla se definen con la etiqueta <th>. Cdigo <table border="1"> <tr> <th>Nombre</th> <th>Apellido</th> </tr> <tr> <td>Pedro</td> <td>Garcia</td> </tr> <tr> <td>Juan</td> <td>Perez</td> </tr> </table>

    Mrgenes de las celdas


    Es el espacio que se encuentra entre los bordes de la celda y su contenido. Definimos los mrgenes con el atributo cellpadding. Cdigo <table border="1px" cellpadding="20px"> <tr> <th>Nombre</th> <th>Apellido</th> </tr> <tr> <td>Pedro</td> <td>Garcia</td> </tr> </table>

    Espaciado entre celdas


    Es el espacio que se encuentra entre celda y celda. El mismo est definido con el atributo cellspacing. Cdigo <table border="1px" cellspacing="15px"> <tr> <th>Nombre</th> <th>Apellido</th> </tr> <tr> <td>Pedro</td> <td>Garcia</td> </tr> </table>

    Imgenes en HTML Cmo insertamos imgenes en un archivo HTML?


    Para insertar imgenes en un sitio usaremos la etiqueta <img>. La etiqueta <img> es una etiqueta vacia, es decir que debemos utilizarla con el atributo src para que muestre la imagen. La etiqueta <img> no tiene cierre.

    Veamos un ejemplo Si tenemos una imagen que se llama "meet1.gif" ubicada en el directorio "http://www.cybercomxal.com/images/" Cdigo <img src="http://www.cybercomxal.com/images/m eet1.gif">

    Texto alternativo de la imagen


    Se utiliza en caso que deseemos visualizar un texto aparte de la imagen. Muchas veces el navegador no visualiza las imgenes, y este atributo nos ayuda a ver de que se trata la imagen. Cdigo <img src=" http://www.cybercomxal.com/images/meet1.gif " alt="Dos personas charlando">

    Formularios en HTML
    Para qu se usan los formularios?

    Los formularios son usados para que el usuario ingrese datos. Esos datos son enviados a un agente para que los procese (por ej., a un servidor web, a un servidor de correo, etc.).

    La etiqueta form
    Dentro de la etiqueta <form> se encuentra el formulario. Los usuarios interaccionan con los formularios a travs de las llamados controles. Tipos de controles: Botones (buttons) Casillas de verificacin (checkboxes) Radiobotones (radio buttons) Menes (menus) Entrada de texto (text input) Seleccin de ficheros (file select) Controles ocultos (hidden controls) Controles tipo objeto (object controls) Dentro de la etiqueta form, se encuentra el atributo action. Este nos especificar el documento que manejar el formulario completado y enviado. Tambien contamos con el atributo method. El mismo nos define el mtodo por el cual se enviarn los datos del usuario al servidor.

    La etiqueta input
    Nos define el registro donde el usuario puede ingresar los datos. Type: especifica el tipo de control a crear. Text Crea un control de entrada de texto de una lnea. Cdigo <form action="datos.php" method="get"> Nombre: <input type="text" name="nombre"> <br> Apellido: <input type="text" name="apellido"> </form>

    Radio botones
    Se usan cuando queremos que el usuario elija entre una serie de opciones. Cdigo <form action="edades.asp" method="post"> Edad? <input type="radio" name="edad" value="menor">menor de 17 <br> <input type="radio" name="edad" value="adulto">entre 18 y 60 <br> <input type="radio" name="edad" value="mayor">mayor de 61 </form>

    Checkbox (casillas de verificacin)


    Permite al usuario elegir entre varias opciones. Cdigo <form action="hobbie.php" method="get"> Pasatiempos? <input type="checkbox" name="pasa" value="tv">TV <br> <input type="checkbox" name="pasa" value="libros">Libros <br> <input type="checkbox" name="pasa" value="musica">Msica <br> <input type="checkbox" name="pasa" value="otros">Otros </form>

    Password Funciona igual que text, pero el texto introducido se presenta mediante una serie de asteriscos. Es utilizado generalmente para ingresar contraseas. Submit

    Botn de envio de datos del formulario. Reset Botn de reinicializacin. Al ser pulsado reinicializa todos los controles a sus valores iniciales. Cdigo <form action="datos_personales.php" method="post"> Nombre: <input type="text" name="nombre"><br> Contrasea: <input type="password" name="secreto"><br> <input type="submit" value="Enviar"> <input type="reset" value="Borrar"> </form>

    La etiqueta select
    La etiqueta select es usada para crear un men desplegable. Cada opcin ofrecida por el men se representa con la etiqueta <option> Cdigo <form action="continentes.php" method="get"> <select name="continente"> <option value="america">America</option> <option value="asia">Asia</option> <option value="europa">Europa</option> <option value="oceania">Oceania</option> <option value="africa">Africa</option> </select> </form>

    La etiqueta textarea
    Se usa para crear un control de entrada de texto multilnea. Los atributo rows y cols nos indican la cantidad de filas y columnas que tendra el recuadro del rea de texto. Cdigo <form action="texto.php" method="post"> <textarea name="eltexto" rows="5" cols="30"> Aqu podemos ingresar un texto introductorio si lo deseamos. </textarea> </form>

    Actividad para Casa


    Realizar una pagina en HTML que cuente con todas las opciones que vimos en clase.

    Você também pode gostar