Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Lenguaje HTML Basico

    Cargado por

    Manuel Mendez
    11 vistas10 páginas

    Título original

    39789610 Lenguaje HTML Basico

    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
    11 vistas10 páginas

    Lenguaje HTML Basico

    Cargado por

    Manuel Mendez

    Copyright:

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

    LENGUAJE HTML BSICO

    Antes de adentrarnos en el mundo de la programacin Web definamos muy prcticamente una pgina Web.

    Qu es una pgina Web?


    Se puede responder a esta pregunta desde dos puntos de vista: 1. Desarrollador o creador de pginas Web: Para ellos, se trata de una hoja electrnica la cual est conformada por una variedad de material audiovisual, que est organizado estructuralmente para mostrar cualquier tipo de informacin, la cual est interconectada con una serie de pginas similares conformando as un sitio Web. 2. Usuario: Es una especie de programa que sirve para buscar, utilizar e intercambiar gran variedad de informacin, la cual se muestra en la pantalla de un computador. Ahora, para construir nuestra primera pgina, debemos conocer primero el lenguaje de programacin que se utiliza. Es por ello que recomiendo, antes de empezar a usar herramientas para el diseo Web, tener una base de referencia sobre el funcionamiento del lenguaje HTML, el estndar para crear pginas Web.

    Entonces empecemos:

    HTML (Hyper Text Mark-up Language) es un lenguaje de programacin (herramienta


    estructurada que permite modificar el comportamiento de un programa e incluso de todo un computador) para Internet que se utiliza en la creacin y modificacin de pginas Web.

    Es una herramienta sencilla utilizada parar el desarrollo de hipertextos, es decir, texto presentado en forma estructurada y agradable, con enlaces (Hyper-Links) que nos dirigen tanto a otras pginas como a segmentos de ellas mismas, y con inserciones multimedia (grficos, sonido, slides o diapositivas, video, animaciones, etc.), que resumiendo y lo vamos a tomar de aqu en adelante, son OBJETOS o elementos que tenemos en una pgina Web, todo esto se puede realizar por medio de un editor de textos sencillo generando un archivo plano guardado con extensin htm o html, aqu creamos la pgina, luego abrimos un explorador de Internet (Mozilla, Opera o Internet Explorar), el cual interpreta el texto de este archivo y muestra la pgina como estamos acostumbrados a verla.

    Esta herramienta web se basa en la interpretacin de etiquetas que forman un documento de texto lineal y jerrquico donde podemos referenciar enlaces a material audiovisual, de all las caractersticas fsicas de una pgina Web (texto, imgenes, sonido, video,), ahora revisemos el concepto principal:

    ETIQUETA:
    Son palabras reservadas en ingles, interpretadas por la herramienta HTML encerradas entre los signos menor que (<) y mayor que (>), que definen una accin, una insercin de objetos (tablas, imgenes, sonido, texto, etc.) y el diseo de la pgina Web; su estructura general es la siguiente:

    <Nombre etiqueta> Ms etiquetas y/o texto = lenguaje HTML </Nombre etiqueta> Donde la primera lnea tenemos la etiqueta de abertura

    El siguiente es un ejemplo de cdigo HTML que define que es la base para desarrollar cualquier pgina:
    <HTML> <HEAD> <TITLE>Mi primera pagina web </TITLE> </HEAD> <BODY> <H1 align="center" >Mi Primera pagina web </H1> <HR> <P>Esto tan sencillo es una verdadera pgina web, aunque le falta el contenido, pero todo llegar.</P> </BODY> </HTML>

    Lo que haremos ser abrir en Windows WordPad o Bloc de Notas, en Linux gedit, copiamos todo el texto anterior en el archivo en blanco, lo guardamos con el nombre Mi_1raPagina.htm sin cerrarlo, le damos doble click encima del icono del archivo para que lo ejecute algn explorador de Internet y por ltimo volvemos al archivo para seguir anexndole ms objetos HTML; si hemos cerrado el archivo y lo queremos modificar, entonces damos click derecho sobre el cono y le damos abrir con cualquiera de los tres mencionados anteriormente; debe aparecer exactamente esto:

    Explicando el cdigo HTML anterior, tenemos que: Si te fijas en la pgina que ves con el explorador solo se ve parte de lo que has escrito, concretamente todo lo que no est encerrado entre los smbolos < y >. Eso es el contenido de la pgina, pero y lo que est entre esos parntesis angulares? pues esas son las etiquetas que le dicen al explorador como mostrar el contenido: en grande, con colores, centrado, el ttulo de la pgina, etc. Si te fijas cada etiqueta tiene un comienzo y un fin:
    <ETIQUETA parmetros> ... </ETIQUETA>

    Como ves una apertura y un cierre. Algunaas etiquetas (como <BR> cambio de lnea o <HR> linea horizontal) no llevan cierre. Fijaros que lo primero que tenemos es la etiqueta <HTML> cerrda al final del documento con </HTML>, eso quiere decir que estamos ante un HTML:
    <HTML> ... </HTML>

    Dentro de ese documento vemos una parte llamada cabecera, que la reconocers porque est limitada con la etiqueta <HEAD> </HEAD>. l contenido de esta parte no siempre es visible, y si lo es nunca se muestra en la pgina en s. Contiene por ejemplo el ttulo que se ve en la ventana del explorador, arriba a la izquierda. La cabecera queda por tanto:
    <HEAD> <TITLE>Mi pgina web</TITLE> </HEAD>

    La otra parte es el cuerpo o <BODY> </BODY>, es el contenido de la pgina web. Tiene una etiqueta con cierre:
    <BODY> ... </BODY>

    El cuerpo es el contenido de la pgina propiamente dicho, o sea, lo que se ve, en el es donde colocarn prcticamente todos los elementos que vamos a ir viendo por este manual. Los atributos que admite esta etiqueta <BODY>: BACKGROUND BGCOLOR TEXT LINK VLINK ALINK LEFTMARGIN y TOPMARGIN LEFTMARGIN y TOPMARGIN Coloca una imagen como fondo de la pgina. Define el color de fondo de la pgina. Color del texto. Color de un enlace no visitado (por defecto azul). Color de un enlace ya visitado (por defecto prpura). Color que toma un enlace mientras lo estamos pulsando (por defecto rojo). Nmero de pixels que dejar de margen entre el borde de la ventana y el contenido de la pgina. Equivalentes a los anteriores, pero stos funcionan en Netscape.

    Y ahora el contenido:
    <H1 align="center"> Mi primera pgina web</H1>

    Con esto colocaremos el texto en formato <H1> (o cabecera 1) y centrado (align="center"), o sea, en tamao grande y centrado en la pgina, una forma de resaltar la frase. Estos son las etiquetas que se pueden usar para mostrar cabeceras o ttulos:

    Etiqueta
    <H1> ... </H1> <H2> ... </H2> <H3> ... </H3> <H4> ... </H4>

    Resultado

    Cabecera de nivel 1
    Cabecera de nivel 2
    Cabecera de nivel 3
    Cabecera de nivel 4
    Cabecera de nivel 6

    <H5> ... </H5> Cabecera de nivel 5 <H6> ... </H6>

    Ahora separamos esa frase por medio de una lnea horizontal:


    <HR>

    Como ves este es un ejemplo de etiqueta sin cierre. Y por ltimo colocamos un texto explicativo en un prrafo (<P></P>), o sea, un bloque de texto con un espacio por delante y otro por detrs:
    <P>Esto tan sencillo es una verdadera pgina web, aunque le falta el contenido, pero todo llegar.</P>

    Evidentemente en las pginas no todo el contenido es igual y por tanto no todo se ha de mostrar en la misma forma, por eso HTML nos permite modificar el aspecto del texto: podemos darle diferentes formatos, modificando desde el aspecto de los caracteres (tipo de letra) hasta el color. Podemos formatear desde las letras una por una hasta bloques completos de texto.

    ESTILOS DE PRRAFOS
    Estos estilos o formatos actan a nivel de prrafo Etiqueta <P> Significado Resultado

    Sirve para delimitar un prrafo. Inserta una Soy un prrafo: fjate en los lnea en blanco antes del texto. espacios de antes y de despus.

    Alineacin izquierda Texto centrado Justificar el texto del prrafo a la izquierda Alineacin derecha (ALIGN=LEFT), derecha (RIGHT), al centro <p ALIGN=x> ... </p> Texto justificado o sea, (CENTER) o a ambos mrgenes (JUSTIFY alineado a ambos lados sin html4 ) dejar, escalones en el margen derecho. <CENTER> ... </CENTER> <PRE WIDTH=x> ... </PRE> Permite centrar todo el bloque de texto encerrado. Representa el texto encerrado en ella con un tipo de letra de paso fijo. El parmetro WIDTH especifica el nmero mximo de caracteres en una lnea. Mete sangras de prrafo tanto a derecha como a izquierda. Suele usarse como tabulador Alineacin por defecto Texto centrado

    Estoy en paso fijo

    <BLOCKQUOTE> ... </BLOCKQUOTE>

    Si quieres ver el texto indentado por ambos mrgenes usa el Blockquote.

    Para cambiar el tipo de letra en un prrafo definido, como lo hacemos con un editor de textos se utilizan las siguientes etiquetas:

    Etiqueta
    <B> ... </B> <I> ... </I> <U> ... </U> <S> ... </S> <SUP> ... </SUP> SUB> ... </SUB> <BIG> ... </BIG> <SMALL> ... </SMALL>

    Utilidad Pone el texto en negrita Representa el texto en cursiva Para subrayar algo Para tachar Letra superndice Letra subndice Incrementa el tamao del tipo de letra Disminuye el tamao del tipo de letra

    Resultado Soy un texto negro como el tizn Estoy sper felix Como soy muy importante estoy subrayado A m, en cambio, nadie me quiere E=mc2 ai,j=bi,j+1

    Soy GRANDE
    Cre ver un lindo gatito

    Otras etiquetas: Etiqueta <BR> <HR> <!--Cualquier texto --> Significado Cambio de lnea Barra horizontal Comentarios No se ve muestra en la pgina Resultado Un espacio en blanco entre lneas

    Antes de continuar, hagamos referencia sobre algo supremamente importante que son los

    ATRIBUTOS de una etiqueta (pero no todas las tienen, y eso lo veremos paulatinamente); y no
    son ms que caractersticas de los objetos que se quieren utilizar, por ejemplo pensemos en el objeto Tabla que su estructura en Html es: <table> <tr> <td>1,1</td> <td>1,2</td> </tr> <tr> <td>2,1</td> <td>2,2</td> </tr> Su resultado es:

    table, como en cualquier procesador de textos tiene los siguientes atributos: ancho, alto, borde, alineacin, color entre otros; si queremos la tabla anterior con borde sencillo, color de fondo, el texto de la celda alineado en el centro, una tamao de 200 de ancho y 100 de alto, la tabla centrada en la pgina; entonces ahora la etiqueta quedara de la siguiente forma:

    <table align=center width=200 height=100 bgcolor=Yellow bordercolor=blue> <tr align=center> El resultado es: <td>1,1</td> <td>1,2</td> </tr> <tr align=center> <td>2,1</td> <td>2,2</td> </tr>

    border=1

    Generalizando tenemos entonces una reforma en la semntica para insertar atributos es: atributo=valor, donde valor es el dato que queremos que tome ese atributo, ahora la estructura de una etiqueta quedara as:

    <Nombre etiqueta atributo1=valor, atributo2=valor, atributo3=valor > Ms etiquetas y/o texto = lenguaje HTML </Nombre etiqueta> As, podemos aplicar atributos a cualquier objeto que tengamos en una pgina Web, lo que veremos a medida que vamos avanzando.

    ENLACES (Links):
    Son accesos que tenemos dentro de nuestra pgina para enlazar otros sitios Web de la internet, e incluso si una pgina es muy extensa, existen enlaces a partes u objetos dentro de ellas para facilitar su uso. As, los enlaces que nos encontramos en cualquier pgina pueden ser de dos tipos: internos a la propia pgina o externos a otra pgina. La forma de construir unos y otros es muy similar como veremos a continuacin:

    La etiqueta <a> Texto que sirve como enlace </a>


    Todo el texto que est contenido dentro de esta etiqueta compone el enlace como tal, si es texto ser resaltado por color, subrayado o lo que necesitemos, si es una imagen, tendr un borde si lo queremos as.

    Adems, cuando pasamos el puntero del ratn que es la flecha normalmente este cambia su forma a la siguiente

    sobre un link,

    y cuando damos click sobre el nos enva el sitio que

    hemos definido en el enlace. El formato completo de la etiqueta es el siguiente:


    <A HREF="direccin de destino" target="destino">Pulsar para saltar</A>

    Donde, la direccin de destino ser la pgina Web especificada mediante una URL, en formato absoluto o relativo (con o sin http://). En ambos casos el destino puede incluso ser un elemento concreto dentro de la pgina. En este caso se ha usado un texto pero igualmente podramos colocar una imagen.

    El atributo target es una manera de decirle al navegador en que ventana debe abrir esa nueva pgina. Por ahora veremos dos de sus valores posibles: _blank: Muestra la nueva pgina en una ventana nueva y sin nombre del navegador. _self: Muestra la nueva pgina en el marco donde est declarado el enlace. Este es el destino por defecto de cualquier enlace dentro de una pgina, es decir, sin colocar el atributo target.

    Que es una URL


    Cualquier elemento conectado a la red internet se identifica por un conjunto de cuatro nmeros entre 0 y 255, algo as como 84.234.12.122, cualquier sitio de Internet est identificado por esta direccin. Pero como quiera que recordar esos nmeros no es nada fcil existen unos servidores de nombre que transforman esas direcciones en nombres ms humanos como

    www.liceodelosandes.org. A estas direcciones se les llama Universal Resource Locator, o URL, es la forma de localizar cualquier pgina en internet. En general tiene el siguiente formato:
    protocolo://www.liceodelosandes.org

    Donde protocolo puede ser: http: Es el protocolo para la transmisin de documentos HTML, es decir, el que habitualmente usamos para ver las pginas en nuestro navegador. https: Es similar al anterior pero con la particularidad de que la informacin viaja codificada mediante tcnicas de seguridad. ftp: Es un protocolo para la transmisin de ficheros (File Transfer Protocol). Permite intercambiar ficheros con sitios en los que se ejecuten servidores ftp. Los navegadores actuales permiten

    acceder a estos servidores FTP, pero lo ms normal es usar unos programas al efecto denominados clientes de FTP. mailto: Otro protocolo para la transmisin de datos, pero en este caso a travs de servidores de correo. news: Mediante este protocolo accedemos a los denominados grupos de noticias, listas de distribucin de mensajes relativos a temas concretos. Habitualmente se accede a estos servidores mediante el cliente de correo. telnet: Es un terminal de acceso remoto en modo texto. Es un sistema bastante inseguro por lo que no es habitual en servidores donde la seguridad est bien pensada.

    Entonces para acceder a la pgina del colegio Liceo de los Andes, tenemos que ingresar la siguiente etiqueta:
    <A HREF="http://www.liceodelosandes.org" target="_self">Liceo de los Andes</A>

    En la prxima publicacin avanzaremos ms en este tutorial de HTML.

    _________________________________

    Ing. Jhon Darley Saldaa Parra


    _________________________________

    También podría gustarte