Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Curso HTML

    Cargado por

    Angel Huerta Robles
    4 vistas6 páginas

    Derechos de autor

    © Attribution Non-Commercial (BY-NC)

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    4 vistas6 páginas

    Curso HTML

    Cargado por

    Angel Huerta Robles

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 6

    CURSOBSICODEHTML

    LuisJosSnchezGonzlez

    INTRODUCCIN
    Para crear una pgina web podemos optar por una de los siguientes mtodos: a) Utilizar una herramienta de diseo web como Screem, Blue Fish, Front Page o incluso un procesador de textos como el Writer de OpenOffice o el Word de Microsoft. Ventaja: Casi cualquiera puede hacer pginas web en poco tiempo. Inconvenientes: Cada herramienta le da a la pgina un sutil toque personal y se suele notar cul de ellas se ha utilizado para su elaboracin. Puede que la pgina no se vea bien en cualquier navegador, especialmente si se utilizan herramientas de Microsoft. Por lo general, las pginas suelen quedar bastante cutres. b) Escribir la pgina directamente en HTML (HyperText Markup Language). Ventaja: Tienes control absoluto sobre lo que ests haciento. Slo hace falta un sencillo editor de texto. Inconvenientes: Hay que saber HTML. Es laborioso hacer cualquier cosa por insignificante que parezca por lo que se suele emplear mucho tiempo en crear y mantener una pgina web. c) Mtodo mixto. Consiste en crear el esqueleto de la pgina con una herramienta y luego modificarla a mano introduciendo o cambiando cdigo HTML. Ventaja: En principio parece que rene las ventajas de los dos mtodos anteriores. Inconvenientes: En la prctica, ana los inconvenientes de los dos mtodos anteriores. Resulta ms difcil retocar el cdigo generado por una herramienta de diseo que el cdigo escrito por uno mismo.

    Luis Jos Snchez Gonzlez

    Curso de HTML

    MTODODETRABAJO
    Para crear una pgina web escribiendo cdigo HTML slo necesitamos un procesador de textos (cuanto ms simple mejor) y un navegador para ir viendo cmo van quedando las pginas. Como editores, en Linux se puede utilizar por ejemplo el Kword y, en Windows, el bloc de notas. Como navegador, el que ms te guste (Opera, Internet Explorer, Nestcape Navigator,etc.), personalmente utilizo Opera. El mtodo de trabajo ser simple, tendremos abierto tanto el editor de texto como el navegador, y en ambos estar cargado el fichero sobre el que estamos trabajando. Iremos modificando el fichero en el editor e iremos dndole al botn de actualizar del navegador para ver los cambios producidos.

    PRIMERAPGINA
    Escribiremos el siguiente cdigo en el editor de texto y lo guardaremos como primera.html. <HTML> <BODY> Esta es mi primera pgina. </BODY> </HTML>

    Lo cargamos desde el navegador et voil, ya tenemos hecha nuestra primera pgina web. Las etiquetas <HTML> y </HTML> marcan respectivamente el principio y el final de un documento escrito en HTML. Entre las etiquetas <BODY> y </BODY> se escribir el cuerpo en s de la pgina, lo que realmente queremos que se muestre.

    CABECERA,TTULOYALINEACINDELTEXTO
    Vamos a elaborar un poco ms la pgina anterior. Ahora podemos guardarla como pagina02.html. <HTML> <HEAD> <TITLE>Segunda pgina del curso de HTML</TITLE> <META AUTHOR="Luis Jos Snchez Gonzlez"> <META KEYWORDS="pgina web curso HTML"> <META DESCRIPTION="Esta pgina forma parte de un curso de HTML. En ella se muestran conceptos bsicos como el ttulo de una pgina o la alineacin del texto."> </HEAD> <BODY> <CENTER> <H1>Segunda Pgina.</H1> Esta frase est centrada.<BR> </CENTER> <DIV ALIGN="LEFT">Esto est pegado<BR>

    Luis Jos Snchez Gonzlez

    Curso de HTML

    a la izquierda.</DIV><BR> <DIV ALIGN="RIGHT">Y esta ltima frase est<BR> pegada a la derecha.</DIV> </BODY> </HTML> Entre las etiquetas <HEAD> y </HEAD> se puede especificar informacin que puede ser ms o menos relevante pero que no afecta al contenido, como por ejemplo el ttulo de la pgina, su autor, una serie de palabras clave por las que se puede encontrar la pgina si se da de alta en un buscador y la descripcin del contenido de la pgina. Con <H1>, <H2>, <H3>, <H4>, <H5> y <H6> se indica el tipo de cabecera o ttulo. <H1> muestra la cabecera ms grande y <H6> la ms pequea. <BR> provoca un salto de lnea. Por ltimo <CENTER> permite centrar un texto y <DIV ALIGN> nos permite alinearlo a la izquierda o a la derecha.

    FORMATODELTEXTOYCOLORES
    Se puede cambiar tanto el color del fondo de la pgina como el del texto que contiene. El color se puede indicar escribiendolo en ingls o bien especificando la cantidad de rojo, verde y azul. Para cada color se utilizan dos dgitos en hexadecimal (desde el 00 hasta el FF). Por ejemplo, siqueremos utilizar un color que tenga el mximo de rojo, mucho verde y casi nada de azul podramos usar el #FF9912 (FF de rojo, 99 de verde y 12 de azul). Las etiquetas <P> y </P> marcan el comienzo y el final de un prrafo.

    <HTML> <HEAD> <META AUTHOR="Luis Jos Snchez Gonzlez"> </HEAD> <BODY BGCOLOR="yellow"> <CENTER> <H1>PGINA EN COLORES.</H1><BR> <H2><FONT COLOR="green">ESTOY EN COLOR VERDE</FONT></H2><BR> <H2><FONT COLOR="blue">ESTOY EN COLOR AZUL</FONT></H2><BR> <P> <FONT COLOR="red">Este prrafo est en color rojo. Esto es letra <B>negrita</B>, <I>cursiva</I> y <U>subrayado</U>.</FONT> </P> <P> <FONT COLOR="#F50099">Este prrafo debe salir en color violeta (mezcla de rojo y azul).</FONT> </P> </CENTER> </BODY> </HTML>

    Luis Jos Snchez Gonzlez

    Curso de HTML

    HIPERENLACES
    Mediante <A HREF=enlace> podemos crear un hiperenlace a otra pgina o a cualquier otro fichero. <HTML> <HEAD> <META AUTHOR="Luis Jos Snchez Gonzlez"> </HEAD> <BODY> <CENTER> <H1><FONT COLOR="green">ENLACES A SITIOS INTERESANTES.</FONT></H1><BR> <P> <FONT COLOR="red">Esta pgina contiene enlaces a sitios muy interesantes.</FONT> </P> <A HREF="primera.html">Mi primera pgina web</A><BR><BR> Buscadores:<A HREF="http://www.linux.org">www.linux.org</A><BR><BR> Pginas generales:<A HREF="http://www.terra.es">Terra</A> <A HREF="http://www.lycos.es">Lycos</A><BR><BR> </CENTER> </BODY> </HTML>

    Ejercicio

    Crea una pgina web temtica con alguna informacin y enlaces sobre un determinado tema (ciencia, moda, motor, msica, etc.)

    Luis Jos Snchez Gonzlez

    Curso de HTML

    IMGENES
    Para insertar una imagen dentro de nuestra pgina utilizaremos <IMG SRC=nombre_de_la_imagen>, donde nombre_de_la_imagen ser el nombre del fichero que contiene la imagen que queremos mostrar, por ejemplo gato.jpg, coche_tunning.gif, pucca.bmp.

    <HTML> <BODY> <CENTER> <H1>MIS ANIMALES FAVORITOS</H1> <BR> <BR> <IMG SRC="perro.jpg"><IMG SRC="gato.jpg"><IMG SRC="caballo.jpg"> </CENTER> </BODY> </HTML>

    En el ejemplo anterior tenemos una pgina con 3 imgenes. Por supuesto, esas tres imgenes deben estar en la misma carpeta en la que se encuentra la pgina. De no ser as habra que indicar la ruta completa donde se encuentra ubicada la imgen. Una imagen puede funcionar tambin como un hiperenlace. En el siguiente ejemplo podemos comprobar cmo si pinchamos sobre la imagen, el navegador se va a la pgina indicada.

    <HTML> <BODY> <CENTER> <H1>COCHES DEPORTIVOS</H1> <BR> Haz click sobre el coche rojo para ir <A HREF="http://www.ferrari.com"><IMG Haz click sobre el coche gris para ir <A HREF="http://www.porsche.com"><IMG </CENTER> </BODY> </HTML>

    a la pgina oficial de Ferrari SRC="c_rojo.gif"></A><BR> a la pgina oficial de Porsche SRC="c_gris.gif"></A>

    Luis Jos Snchez Gonzlez

    Curso de HTML

    TABLAS
    En ocasiones puede ser til tener la informacin organizada mediante tablas. Una tabla est formada por celdas que se distribuyen en filas y columnas. En HTML, las filas se delimitan con <TR> y </TR>. Dentro de cada fila, las distintas celdas se identifican con <TD> y </TD>. Veamos un ejemplo sencillo con dos filas y tres columnas.

    <HTML> <BODY> <CENTER> <H2>TABLA CON DOS FILAS Y TRES COLUMNAS</H2><BR> <TABLE BORDER=1> <TR> <TD>LUNES</TD> <TD>MARTES</TD> <TD>MIRCOLES</TD> </TR> <TR> <TD>Lentejas</TD> <TD>Macarrones</TD> <TD>Coles</TD> </TR> </TABLE> </CENTER> </BODY> </HTML>

    Esta pgina mostrara lo siguiente:

    TABLA CON DOS FILAS Y 3 COLUMNAS LUNES Lentejas MARTES Macarrones MIRCOLES Coles

    Luis Jos Snchez Gonzlez

    Curso de HTML

    También podría gustarte