Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • Taller HTML Basico

    Загружено:

    JABERO241
    2K просмотров21 страница

    Авторское право

    © Attribution Non-Commercial (BY-NC)

    Доступные форматы

    PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    2K просмотров21 страница

    Taller HTML Basico

    Загружено:

    JABERO241

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 21

    TALLER DE HTML

    1. Cree una carpeta en el escritorio y asgnele como nombre mi primera pagina web 2. Se debe abrir un editor de Texto que puede ser Bloc de Notas o Notepad++ en este caso Siga los siguientes pasos para abrir Bloc de Notas: De clic en el botn inicio De clic en todos los programas De clic en accesorios De clic en bloc de notas

    3. Abierto el bloc de notas escriba lo siguiente tal y como aparece aqu: <html> <head> <title> Mi primera pgina </title> </head> <body> Aqu van a colocar el texto del documento, o grficos, enlaces, etc. </body> </html> 4. Guarde el archivo con el nombre practica1 dentro de la carpeta anteriormente creada 5. Ahora vuelva a Guardar el archivo con el nombre index.html dentro de la carpeta anteriormente creada 6. Cierre el bloc de notas 7. Vaya a la carpeta y observe que sucedi con el archivo guardado con index.html y con practica1 abra comente con sus compaeras y la profesora que sucedi, que diferencia hay entre uno y otro. 8. Elimine el archivo Practica 1 9. De doble clic en index y observe los resultados 10. Ahora vaya a su carpeta y de clic derecho en el archivo index y en el men contextual seleccione abrir con y buscan en el bloc de notas

    11. Haga los cambios necesarios para que el cdigo quede de la siguiente manera: <html> <head> <title> Mi primera pgina </title> </head> <body> <h1>Mucha importancia</h1> <h2>Menos importancia</h2> <h3>Mucha menos importancia</h3> </body> </html> 12. Guarde los cambios y vaya al navegador y actualzalo en su defecto oprima la tecla F5 13. Observe que sucede y comente con las compaeras y profesora 14. Haga los cambios necesarios para que el cdigo quede de la siguiente manera: <html> <head> <title color= Yellow> Mi primera pgina </title> </head> <body> <font color= blue size= 4 face= Comic Sans MS, Arial, MS Sans Serif>Bienvenidos a mi primera pgina</font> </body> </html> 15. Guarde los cambios y vaya al navegador y actualzalo en su defecto oprima la tecla F5 16. Ahora cmbiele de colores a la letra y de tamao y escriba un poema

    Tareas:
    Leer la teora y contestar en una hoja y luego socializar: a) Que es HTML? b) Cual es la estructura de una pgina web? c) Averigua para que se utilizan las etiquetas HTML, head, title, body, h1. h2. h3 y Font, color, size d) Averiguar cual etiqueta se utiliza para escribir el texto en negrilla

    Solucin
    a) HTML HTML es el lenguaje con el que se escriben las pginas web, las cuales pueden ser vistas por el usuario mediante un tipo de aplicacin llamada navegador.

    Es usado por los navegadores para mostrar las pginas webs al usuario, siendo hoy en da la interface ms extendida en la red. Este lenguaje nos permite unir textos, sonidos e imgenes y combinarlos a nuestro gusto. Se cre en un principio con objetivos divulgativos. Uno de los problemas que se presentan es la diversidad de navegadores presentes en el mercado que no son capaces de interpretar un mismo cdigo de una manera unificada.

    b) Estructura de una pgina web

    1. <HTML>, Identificador del tipo de documento Todas las pginas escritas usando lenguaje HTML deben tener la extensin .htm o .html Al crear una pgina web, en el cdigo debemos iniciar la pgina con la vieta <html> y finalizarla escribiendo al final de todo el cdigo la vieta </html>. Entre estas dos etiquetas escribiremos el resto del cdigo HTML de la pgina web, as:

    2. <head>, Cabecera o Encabezado de la pgina El encabezado de la pgina se utiliza para agrupar informacin (ttulo). Est formado por las etiquetas <head> y </head>. La etiqueta<head> va justo debajo de la etiqueta <html>. Por ejemplo:

    3. <title>, Ttulo de la pgina El ttulo de la pgina es el texto que aparecer en la barra de ttulo, ubicada en la parte superior de la ventana del navegador. El texto deseado debe escribirse entre las etiquetas <title> y</title> Estas etiquetas deben estar dentro del encabezado, es decir, entre las etiquetas <head> y </head>.

    Ejemplo:

    4. <body>, Cuerpo del documento El cuerpo del documento contiene la informacin del documento, todo lo que deseemos que se visualice, el texto de la pgina, las imgenes, texto, formularios, etc. Todos los elementos que formarn el cuerpo de la pgina deben encontrarse entre las etiquetas <body> y </body> y van justo despus de el encabezado.

    A travs de la etiqueta <body> podemos establecer el color o la imagen de fondo para la pgina web. Para establecer el color de fondo utilizamos el atributo bgcolor asignndole un color representado por un nmero hexadecimal o por un nombre predefinido. Para hacer que el color de fondo de una pgina sea de color azul, tendremos que escribir el siguiente cdigo:

    Sera equivalente a escribir:

    c) ETIQUETAS HTML es un lenguaje de marcas o etiquetas, estas marcas sern fragmentos de texto destacado de una forma especial que permiten la definicin de las distintas instrucciones de HTML. En documento HTML ser un fichero texto con etiquetas que variarn la forma de su presentacin. Una etiqueta es un texto incluido entre los smbolos menor que < y mayor que >. El texto incluido dentro de los smbolos ser explicativo de la utilidad de la etiqueta. Por ejemplo:

    Existe normalmente una etiqueta de inicio y otra de fin, la de fin contendr el mismo texto que la de inicio aadindole al principio una barra inclinada /. Por ejemplo: <title> FerGalo </title> Las principales etiquetas usadas son:

    Apertura
    <HTML>

    Accin
    Al principio y al fin de todo documento. Encabezado de la pgina. Aqu se coloca titulo, metatags, e informacin para

    Atributos
    HEAD, BODY

    Cierre
    </HTML>

    <HEAD>

    BASE, TITLE, ISINDEX,

    </HEAD>

    <TITLE>

    <BODY>

    buscadores entre otras cosas. Est informacin no es visible. Ttulo de la pgina web, dentro de HEAD Cuerpo del documento. Va toda la parte visible de la pgina web Definicin de la fuente. Tamao de letras del 1 al 6.

    NEXTID, META

    Ninguno BGCOLOR, BACKGROUND, TEXT, LINK, VLINK, ALINK SIZE, COLOR. Internet Explorer: FACE. HTML 3.0: LEFT, CENTER, RIGHT

    </TITLE> </BODY>

    <FONT> <H1...H6>

    </FONT> </H1 .../H6>

    Nombre
    SIZE COLOR

    Etiqueta

    Accin

    Valor
    size=6

    FACE

    Tamao de la letra de 1 a <font size=?> </font> 7 Color de la letra, se usa <font color=?> </font> valor hexadecimal o nombre directo (blue, green, etc.) Fuente del texto font face=?> </font> Coloca el tipo de letra: Arial, Verdana, Courier,Etc.

    color="#0000 00" (negro)

    face="helv" (helvtica)

    d) Texto en Negrilla Sirven para RESALTAR a aquellas palabras que sean ms importantes en un texto, para que las VEAS mas fcilmente. La etiqueta para poner un texto en negrita se llama "b" (del ingles "bold").

    <B> <TABLE> <IMG>

    Letra Negrita, del ingls Bold (negrita). Definir una tabla. Inclusin de una IMaGen.

    Etiqueta de texto en negrilla: <b> </b> <B>Texto que ser en negrita</B>. Obtendremos: Texto que ser en negrita

    Etiquetas para aplicar en cada una de las prcticas que ejecute con lenguaje HTML y quieras crear una pgina web Cuando quieras colocar un texto en negrilla es necesario que utilice la siguiente etiqueta: 1. Para abrir y para cerrar <b> esto sale en negrilla </b> 2. <p> Hola para construir prrafos <p> 3. Etiqueta para colocar color de letra y tamaos: <Font color= blue size= 10face= Comic Sans Ms, Arial.Ms Sans Serif>Bienvenidos a crear pginas web </font><br></br> 4. Atributo bgcolor, color de fondo seguido de la etiqueta body 5. Practica de color de fondo, tamao de fuente, y centrado de la imagen: <html> <head> <title> Mi pgina en colores</title> </head> <body bgcolor= #507FFF> <h1><p> Aqui iria el resto de la pagina</p><h1> <p align= center><img src=computador.gif width=122 height=85>

    <bgsound src=C:\06 a do con luis silva.mp3 balance=0 volume=0> De clic aqu </bgsound> </body> </html> 6. Para colocar movimiento al texto o la imagen debe utilizar la etiqueta: <marquee> escribe el mensaje </marquee> 7. Las imgenes deben ser cargadas o guardadas en la carpeta, donde tiene guardada la pagina que esta creando, las imgenes deben ser con extensin .gif

    ETIQUETA <HR>
    Esta etiqueta abierta, dibuja una lnea horizontal (Horizontal Rule), con alineacin, tamao y ancho variables. Se utiliza con frecuencia para separar secciones de contenido. Su sintaxis se ilustra en las siguientes lneas: Haga el siguiente programa ya saben como <HTML> <HEAD> <TITLE> Lneas<TITLE> </HEAD> <BODY> Lnea centrada, de tamao 10 puntos y ocupando el 30% de la pgina <HR ALIGN=center SIZE=10 WIDTH=30%> Lnea alineada a la izquierda, de tamao 5 puntos y ocupando la mitad de la pagina <HR ALIGN=left SIZE=5 WIDTH=50%> Lnea alineada a la derecha, de tamao 20 puntos y ocupando la mitad de la pagina <HR ALIGN=right SIZE=20 WIDTH=50%> </BODY>

    </HTML>

    ETIQUETA <BODY>
    Hasta ahora se ha trabajado con pginas cuyos colores son: blanco para el fondo y negro para el texto escrito en ellas. Estos son los colores de HTML toma por defecto. El uso adecuado de la etiqueta <BODY>, que por supuesto tiene atributos, permite entre otras cosas cambiar o establecer: el color del texto, un color o una imagen de fondo y los colores de los enlaces que tendr la pgina. La siguiente es la sintaxis completa de esta etiqueta: <BODY BACKGROUND = "nombre imagen" BGCOLOR = "color fondo" TEXT = "color texto" LINK = "color enlace" VLINK = "color enlace_V" ALINK = color enlace_A"></BODY>

    Nombre_imagen se refiere al nombre, o mejor a la ubicacin del archivo de


    una imagen que se quiere aparezca como fondo de la pgina, color_fondo, color_texto, color_enlace, color_enlace_V y color_enlace_A corresponden a los cdigos o los nombres de los colores para el fondo de la pagina, el texto de la informacin, el texto de los enlaces no visitados, el texto de los enlaces visitados y el texto de los enlaces activos respectivamente. El manejo de estos tres ltimos se vera con fondo negro (black) y texto de color lima (#00ff00):

    Haga el siguiente programa... ya saben como <HTML> <HEAD> <TITLE> Cuerpo<TITLE> </HEAD> <BODY BGCOLOR=black TEXT=#00ff00> <H3>ESTA PGINA TENDR FONDO NEGRO Y TEXTO LIMA</H3>

    </BODY> </HTML>

    Resultado:

    ETIQUETA <BR> y <P>


    La etiqueta <BR> permite forzar un salto de lnea dentro de un texto. Observe que esta etiqueta no se cierra con </BR>, razn por la que se le conoce como etiqueta abierta. <P> es otra etiqueta que puede utilizarse abierta o cerrada. Si se usa de la primera forma, iniciar un nuevo prrafo dejando una lnea en blanco, si por el contrario se cierra con </P> permite alinear el nuevo prrafo a la derecha, en el centro, a la izquierda o justificado, dependiendo del valor asignado al parmetro ALIGN. A continuacin se muestran algunos ejemplos:

    Cdigo
    <P align=left></P> <P align=center></P> <P align=right></P> <P align=justify></P>

    Funcin
    Prrafo alineado a la izquierda Prrafo centrado Prrafo alineado a la derecha Prrafo justificado

    Prctica
    Cree una pgina muy linda y creativa utilizando los conceptos vistos en esta segunda prctica cambie los colores al fondo y letra

    1. Cree una carpeta en el escritorio y pngale el nombre que quiera 2. Busque en internet una imagen tipo GIF y gurdela en la carpeta anteriormente creada con el nombre de compu 3. Ahora abra el bloc de notas y escriba lo siguiente: <HTML> <HEAD> <TITLE> INSERTAR IMGENES</TITLE> <BODY BGCOLOR=white> <IMG SRC=compu.gif width=178 Height=180> </HEAD> </HTML> 4. 5. 6. 7. Guarde el archivo con el nombre imgenes.gif Ejectelo Comente con sus compaeros que sucede o que aparece Ahora escriba el siguiente cdigo: <HTML> <HEAD> <TITLE> Insertar Imgenes</TITLE> <BODY BGCOLOR=white> <IMG SRC=compu.gif WIDTH=500 ALT=computadores> </HEAD> </HTML>

    HEIGHT=180

    8. Guarde el archivo y ejectelo. Que sucede con la imagen? La imagen adquiere una descripcin por la funcin: ALT 9. Cambie los valores de WIDTH y HEIGHT por valores mayores o de menos valor y diga que sucede.

    CELULA
    <html> <head> <title> MI WEB LA CELULA<TITLE> </HEAD> <BODY> <H1><CENTER> LA CELULA</CENTER></H1> <HR><FONT COLOR=RED><MARQUEE><P ALIGN=LEFT> LA CELULA LA UNIDAD FUNDAMENTAL</FONT></MARQUEE> </P></H1>CLASES DE CELULA</H1> </P></H1>PARTES DE LA CELULA</H1> <HR><FONT COLOR=READ> NUCLEO</FONT> <IMG ALIGN=RIGHT SRC=celula.gif> </BODY> </html>

    Colocar un fondo en una pgina web

    Para incluir un fondo en una pgina web necesitamos utilizar el atributo background en la etiqueta <BODY>, al que le asignamos el nombre del archivo que deseamos utilizar como fondo. Si el archivo se encuentra en un directorio distinto que la pgina web, necesitaremos incluir la ruta al archivo, teniendo en cuenta siempre de utilizar una ruta relativa al archivo .html para que se conserve la ruta en caso de que cambiemos el sitio web de localizacin. <body background=fondo.gif"> Lo que conseguimos con esto es que el archivo fondo.gif se muestre en la pgina como fondo. Por defecto, la imagen de fondo aparece como un mosaico, repitindose a lo largo de todo el espacio de la pgina.

    Fondo en otros elementos

    No solo la pgina puede tener un fondo, tambin lo podemos colocar a las tablas o las celdas, por ejemplo. Se utiliza el mismo atributo background, aunque aplicado a otras etiquetas. <table <td background=fondo.gif"> OTRO <html> <head> <title> Mi pgina en colores</title> </head> background=fondo.gif">

    <body background=bkgnd2.gif> <h1>bienvenido a mi pgina< h1> <p>Aqu ira el resto de la pgina</p> </body> </html> <html> <head> <title> Mi pgina en colores</title> </head> <body background=bkgnd2.gif text=#000080> <h1>bienvenido a mi pgina< h1> <p>Aqu ira el resto de la pgina</p> </body> </html>

    <MARQUEE> es una de las etiquetas no estndar de HTML, que soportan los navegadores mas comunes, pero que no estn comprendidas dentro de las especificaciones de HTML. Sirve para animar elementos dentro de la magina. En concreto permite que el contenido que pongamos dentro de la etiqueta ya sea texto, fotografas, o las dos cosas, se desplace horizontalmente por la pgina. La etiqueta marquee puede servirnos para hacer animaciones en pginas sencillas, sin ningn conocimiento de lenguajes de programacin ni otras complicaciones semejantes. Para los que solo conocen HTML es una herramienta perfecta si desean hacer que un elemento de la pgina se mueva. Pero atencin, aunque este comentando este truco para mover texto por la pgina o imgenes, tenemos que utilizar el marquee con mucha prudencia, puesto que tiene desventajas: Marquee no esta comprendido en los estndares HTML Utilizar marquee puede tener problemas de accesibilidad, es decir, se puede hacer difcil de leer para determinadas personas con discapacidades El hecho de animar elementos de una pagina favorece el dinamismo y ayuda a llamar la atencin sobre determinados mensajes o imgenes, pero si utilizas marquee en muchos lugares puede provocar confusin y marear al usuario Para utilizar marquee, simplemente colocamos dentro de la etiqueta los contenidos que queremos que se muevan, ya sean texto, imgenes o cualquier otro tipo de contenido. Algo como esto: <marquee> texto que se mueve</marquee> Pero tambin podramos meter algo como esto: <marquee> <table align=center width=1002border=1> <tr>

    <td> Esta tabla se desplaza con todo el contenido de la tabla</td> </tr> </table> </marquee>

    Marquee soporta una serie de atributos para modificar su comportamiento o


    su aspecto. Son los siguientes: WIDTH Anchura de la marquesina. Si no marcamos altura, se colocar en la siguiente lnea, como en un prrafo distinto. Si marcamos una anchura, la marquesina intentara mostrarse en la misma lnea donde lo hayamos colocado. Si no hay espacio para ella se realizara el consiguiente salto de lnea para mostrarla un poco ms abajo. DIRECTION Hacia donde queremos que se displace el contenido del marquee. Los posibles valores son LEFT y RIGHT. BEHAVIOR Es el comportamiento de la marquesina, de entre los posibles: SCROLL (el comportamiento por defecto) indica que tiene que hacer el desplazamiento siempre en una misma direccin y ALTERNATE, que indica que el desplazamiento se hace a un lado y al otro de manera alternada. SCROLLDELAY Es el tiempo en milisegundos que tiene que pasar entre cada cambio de la posicin de lo que hay desplazndose. Es decir, cuanto mayor sea el valor, ms milisegundos tardar la marquesina en moverse. El valor por defecto es 85, pero si por ejemplo ponemos un valor 500 la marquesina cambiar de estado (desplazar el contenido) cada medio segundo. SCROLLAMOUNT Es la cantidad de pixel que tiene que desplazarse el contenido de la marquesina cada vez que se mueve. A mayor scrollamount, ms se desplazar la marquesina en cada movimiento y por tanto la animacin ser ms rpida. El valor por defecto es 6. Podemos probar a colocar un valor mayor y veremos que el movimiento ser ms a golpes.

    LOOP El nmero de ciclos que va a moverse el texto o lo que quiera que haya dentro de la marquee. Este atributo slo funciona en Internet Explorer. Por defecto es INFINITE, que quiere decir que se desplazar todo el tiempo sin parar. Pero si por ejemplo colocamos un valor como 3, querr decir que la marquesina slo realizar tres ciclos o movimientos y luego parar.

    BGCOLOR El color de fondo de la marquesina. Acepta el nombre de un color HTML o bien un valor RGB de dicho color.

    HSPACE y VSPACE Estos dos atributos sirven para definir el nmero de pxel que debe aparecer entre la marquesina y otros contenidos de la pgina, en horizontal y vertical. Algunos ejemplos de marquee: <marquee width=200 direction=right> Marquesina a la derecha y con ancho </marquee> <marquee behaviour=alternate scrolldelay=500 bgcolor=#ff8833>texto que se mueve</marquee>

    Una tabla HTML puede ser considerada de manera simple como un grupo de filas donde cada una de ellas contiene un grupo de celdas. Las tablas, as como toda estructura en documentos HTML, son definidas usando tags. Una tabla simple puede ser insertada en un documento HTML usando tres tags:el tag HTML table (principal contenedor), el tag HTML tr (fila contenedora) y el tag HTML td (celda simple).

    TABLA1
    <table border="1"summary="Ejemplo de tabla simple con unificaci&oacute;n de celdas de una columna."> <tr> <td rowspan="3">Campo unificado</td> <td>Campo 2</td> <td>Campo 3</td> </tr> <tr> <td>Campo 5</td> <td>Campo 6</td> </tr> <tr> <td>Campo 8</td> <td>Campo 9</td> </tr> </table>

    TABLA1CORAZON
    <HTML> <HEAD>

    <TITLE> EL CORAZON</TITLE> </head> <body bgcolor=black text=#00ffF0> <h2> ES UN ORGANO MUSCULAR HUECO CUYA FUNCION PRINCIPAL <BR></BR>ES BOMBEAR LA SANGRE POR LOS VASOS SANGUINEOS</h2> <h2>PARA LLEVARLA A TODOS LOS RINCONES DEL CUERPO</h2> <a href=ensayo sobre abuelos/htm>Enlace a Tema 4: Hiperenlaces</a> <body> </HTML> <table border="1"summary="Ejemplo de tabla simple con unificaci&oacute;n de celdas de una columna."> <tr> <td rowspan=3>EL CORAZON</td> <td>DIASTOLES</td> <td>SISTOLE AURICULAR</td> </tr> <tr> <td>SISTOLE VENTRICULAR 5</td> <td>CAVIDADES DEL CORAZON</td> </tr> <tr> <td>VALVULAS</td> <td>VENTRICULOS</td> </tr> <a href=http://www.aulaclic.com/Pulse aqu&iacute; para visitar aula </a> </table>

    Вам также может понравиться