Scribd Logo
Загрузить

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

  • Qu Es HTML (Guia 1)

    Загружено:

    jamsalazar13
    14 просмотров7 страниц

    Оригинальное название

    Qu‚ es HTML(Guia 1)

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

    © Attribution Non-Commercial (BY-NC)

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

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

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

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

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

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

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

    Qu Es HTML (Guia 1)

    Загружено:

    jamsalazar13

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

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

    TCNICO PROFESIONAL EN INFORMATICA Y SISTEMAS ASIGNATURA:INTERNET I DOCENTE: JAMES IR SALAZAR TORRES GUIA TALLER No.

    1 Marzo 17 de 2010

    EL LENGUAJE HTML
    PROPOSITOS O METAS A LOGRAR: Conocer y aplicar los elementos bsicos del lenguaje HTML necesarios para la creacin de una pagina Web, mediante el uso de un procesador de texto. ACTIVIDADES BSICAS Qu es HTML
    El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las pginas web este lenguaje permite escribir texto de forma estructurada, y que est compuesto por etiquetas, que marcan el inicio y el fin de cada elemento del documento. Un documento Html no slo se compone de texto, puede contener imgenes, sonido, vdeos, etc., por lo que el resultado puede considerarse como un documento multimedia. Los documentos HTML deben tener la extensin html o htm, para que puedan ser visualizados en los navegadores (programas que permiten visualizar las pginas web). Los navegadores se encargan de interpretar el cdigo HTML de los documentos, y de mostrar a los usuarios las pginas web resultantes del cdigo interpretado.

    Programas de Edicin WEB


    Actualmente crear una pgina web no presenta ningn problema. Por un lado, hay una amplia oferta de programas especficos que facilitan la tarea; por otra parte, la mayora de programas corriente, como Microsoft word, o OpenOffice, tienen una opcin de guardar como pgina web (html), de manera que basta con preparar el documento como siempre y guardarlo aprovechando esta opcin.

    Los programas de Edicin de HTML:


    De todos modos, si lo que se quiere es crear pginas web con un mayor control sobre su diseo, se necesitar un editor dedicado para html; en este curso se dar inicio con el conocimiento del lenguaje Html trabajndolo en editores de texto (Bloc de notas y Pspad) ya cuando se tengas un conocimiento del lenguaje HTML se har uso de otros programas preferiblemente, que sea un editor grfico, para no tener que memorizar el cdigo html sino
    Pgina 1 de 7

    mas bien ya conocindolo, usarlo solo cuando sea extremadamente necesario. Por suerte, no es necesario comprar uno de estos programas, porque con las ltimas versiones de los navegadores se incluye una utilidad para crear y publicar nuestras maravillas! Con Internet Explorer viene FrontPage Express (una versin reducida de su programa comercial FrontPage) y Netscape lleva el Composer. Ambos programas son sencillos de utilizar, cuentan con completa ayuda y no estn nada mal para empezar. OpenOffice tampoco costar nada y viene perfectamente equipado para la creacin y publicacin web. Hay muchas otras alternativas que listan a continuacin, pero para empezar las mencionadas anteriormente son las ms adecuadas.

    Stone's WebWriter Araneae 4.5.2 HTML-kit EditPad Lite 1st Page 2000 v2.0 NoteTab Light Arachnophilia 4.0 EZPad NotesPad UltraEdit Quanta (Linux)

    Los ejemplos y ejercicios planteados aqu se deben realizar en el Bloc De Notas de Windows (inicio Ejecutar (digitar notepad) Aceptar) y los archivos deben ser guardados con nombre de archivo.htm o html

    Sintaxis del HTML (Estructura General de una Pagina Web)


    <html> <head> <title>MI PRIMERA WEB EN HTML</title> <body bgcolor="#FFCC99"> <font color="#CC3300" size="5">INFORMATICA Y SISTEMA (Internet 1). <br>ESTA PAGINA ESTA HECHA EN HTML</font> </body> </html>

    Guarda este ejemplo con el nombre pagina_prueba.htm (una vez este guardad ve al sitio donde la guardaste y la encontraras con el Icono de Internet (Doble click y listo ya puedes observar tu primera pagina web EN HTML)
    Consejo: Utiliza nombres en tus archivos que tengan algunas normas bsicas para ahorrarte disgustos y lios. Mi consejo es que no utilices acentos ni espacios ni otros caracteres raros. Tambin te ayudar escribir siempre las letras en minsculas. Esto no quiere decir que debes hacer nombres de archivos cortos, es mejor hacerlos descriptivos para que te aclaren lo que hay dentro. Algn carcter como el guin "-" o el guin bajo "_" te puede ayudar a separar las palabras. Por ejemplo quienes_somos.htm

    Pgina 2 de 7

    El HTML es un lenguaje que basa su sintaxis en un elemento de base al que se le llama etiqueta (tags). La etiqueta presenta frecuentemente dos partes: Una apertura de forma general <etiqueta> Un cierre de tipo </ etiqueta> Todo lo incluido en el interior de esa etiqueta sufrir las modificaciones que caracterizan a esta etiqueta. As por ejemplo: Las etiquetas <b> y </b> definen un texto en negrita. Si en nuestro documento HTML escribimos una frase con el siguiente cdigo: <b>Esto esta en negrita</b> El resultado Ser:
    Esto esta en negrita

    Partes Basicas De Una Pagina Web Todas las pginas web escritas en HTML tienen que tener la extensin html o htm. Al mismo tiempo, un documento HTML ha de estar delimitado por la etiqueta <html> y </html>. Entre las etiquetas <html> y </html> estar comprendido el resto del cdigo HTML de la pgina. Por ejemplo: <html> ... </html> Dentro de este documento, se puede distinguir dos partes principales: Cabecera de la pgina <head> La cabecera de la pgina se utiliza para agrupar informacin sobre ella, como puede ser el ttulo. Est formada por las etiquetas <head> y </head>. La etiqueta <head> va justo debajo de la etiqueta <html>. Por ejemplo: <html> <head> ... </head> ... </html>
    Pgina 3 de 7

    Entre las etiquetas <head> y </head>, las etiquetas se pueden encontrar y ms se utilizan son: <link>, <style>, <script> (estas etiquetas las veremos ms adelante), <meta> (Consulta para qu sirve y cmo utilizar esta etiqueta) Ttulo de la pgina <title> El ttulo de la pgina es el que aparecer en la parte superior de la ventana del navegador, cuando la pgina est cargada en l. Para asignar un ttulo a una pgina es necesario escribir el texto deseado entre las etiquetas <title> y </title>. Estas etiquetas han de estar dentro de la cabecera, es decir, entre las etiquetas <head> y </head>. Por ejemplo: <html> <head> <title> Curso de HTML </title> </head> ... </html> Las maysculas o minsculas son indiferentes al escribir etiquetas

    Las etiquetas pueden ser escritas con cualquier tipo de combinacin de maysculas y minsculas. <html>, <HTML> o <HtMl> son la misma etiqueta. Resulta sin embargo aconsejable acostumbrarse a escribirlas en minscula ya que otras tecnologas que pueden convivir con el lenguaje HTML (Javascript y XML por ejemplo) no son tan permisivas y nunca viene mal coger buenas costumbres desde el principio para evitar fallas en un futuro. Ejemplo 2 (no olvides hacerlo en el Bloc de Notas)
    <html> <head> <title>Cocina Para Todos</title> </head> <body> <p><b>Bienvenido,</b></p> <p>Ests en la pgina <b>Comida para Todos</b>.</p> <p>Aqu aprenders recetas fciles y deliciosas.</p> </body> </html>

    Etiqueta de inters
    Pgina 4 de 7

    <!-- y //-->.(para comentarios)

    <BR> (salto de Linea) <B> y </B> (negritas) <I> y </I> (Cursivas) <u> y </u>(Subrayado) <sub> y </sub>(subndice) ; <sup> y </sup>(superndice) para insertar imgenes <IMG SRC=imagen.extension>
    <p align="left">Texto alineado a la izquierda</p> (cambia left por:center, right) como se observa siempre va dentro de comillas el atributo(aunque sin ellas tambin funciona). Imaginen un texto relativamente largo donde todos los prrafos estn alineados a la izquierda (por ejemplo). Una forma de simplificar el cdigo y de evitar introducir continuamente el atributo align sobre cada una de nuestras etiquetas es utilizando la etiqueta <div>. Esta etiqueta por si sola no sirve para nada. Tiene que estar acompaada del atributo align y lo que permite es alinear cualquier elemento (prrafo o imagen) de la manera deseada. As, el cdigo:
    <p align="left">Parrafo1</p> <p align="left"> Parrafo3</p> <p align="left"> Parrafo2</p> es equivalente a: <div align="left"> <p>Parrafo1</p> <p>Parrafo2</p> <p>Parrafo3</p> </div> Como se puede evidenciar, la etiqueta <div> marca divisiones en las que se definieron un mismo tipo de alineado.

    PARRAFOS(Formato de texto):

    ACTIVIDADES PRCTICAS
    Para afianzar un poco ms lo que se ha explicado, desarrolle algunos ejercicios.(trata de resolverlo sin ver la solucin planteada) Ejemplo prctico 1: Simplemente se quiere construir una pgina que tenga este orden: 2 3 1 1 Prrafos centrados Prrafos alineados a la derecha salto de lnea triple prrafo alineado a la izquierda
    Pgina 5 de 7

    Solucin (una Forma) <html>


    <head> </head> <title>Ejemplo de formateo de parrafos</title>

    <body> <p align="center"> Ejemplo de formatear prrafos </p> <p align="center"> Esto es el resultado: </p> <div align="right"> <p> Que son los buscadores que no tienen porque mantener un ndice y que tienen robots que constantemente recorren Internet en busca de nuevas pginas para incluirlas en el buscador. </p> <p> Imaginemos un texto relativamente largo donde todos los prrafos estn alineados a la </p> <p> Que son los buscadores que no tienen porque mantener un ndice y que tienen robots que </p> </div> <br> <br> <br> <p> Esto es que acaba... hasta luego... </p> </body> </html>

    ENCABEZADOS: <h1>Encabezado <h2>Encabezado <h3>Encabezado <h4>Encabezado <h5>Encabezado <h6>Encabezado

    de de de de de de

    nivel nivel nivel nivel nivel nivel

    1</h1> 1</h2> 1</h3> 1</h4> 1</h5> 1</h6>

    Color, tamao y tipo de letra.


    Atributo face: Define el tipo de letra (preferiblemente seleccionar varios tipos para evitar que el explorador le asigne uno por defecto en caso de no existir). Ejm: <font face="Comic Sans MS,arial,verdana">Este texto tiene otra tipografa</font> Atributo size: Define el tamao de la letra. Este tamao puede ser absoluto o relativo. (absoluto va de 1 -7) (relativo en base al tamao anterior usando signos + o -) ejm: (font size=+1) Atributo color: El color del texto puede ser definido mediante el atributo color. Cada color es a su vez definido por un nmero hexadecimal que esta compuesto a su vez de tres partes. Cada una de estas partes representa la contribucin del rojo, verde y azul al color en cuestin. Ejm: font color="red">Este texto est en rojo</font>

    Pgina 6 de 7

    Ejemplo prctico 2: Con todo los elementos anteriores ya se esta ya en condiciones de crear un texto con formato de una forma realmente mas elaborada. Realizar el ejercicio consistente en una pgina que tenga las siguientes caractersticas:

    Un titular con encabezado de nivel 1, en itlica y color verde oliva. Un segundo titular con encabezado de nivel 2, tambin de color verde oliva. Todo el texto de la pgina deber presentarse con una fuente distinta de la fuente por defecto. Por ejemplo "Comic Sans MS" y en caso de que sta no est en el sistema que se coloque la fuente "Arial".
    aguamar Fucsia lima Maroon Navy Olive marron Azu mar oliva purple Silver Teal purpura Plata verde

    Aqua Fuchsia Lime

    <body> (Solucin posible) <font color="Olive" face="Comic Sans MS,arial"> <h1 align="center"><i>Cocina para Todos</i></h1> <h2 align="center">La cocina tu alcance</h2> </font> <font face="Comic Sans MS,arial"> Descubre los platos ms exquisitos, fciles y econmicos que puedas imaginar. <br> Dentro de este sitio podrs tener acceso a gran variedad de <b>recetas</b> de preparacion sencilla, aprenders como realizar <b>operaciones comunes</b> dentro de una cocina y podras en nuestro <b>consultorio</b> gourmet donde nuestro cocinero virtual podr ayudarte con tus proyectos culinarios. Tambin te ser posible adquirir los <b>libros</b> gastronmicos ms populares al precio <br> Adntrate en los misterios de la cocina sin quemar ms cacerolas ni llamar al pizzero. </font> </body>

    PRODUCTOS:
    Se debe entregar como producto del desarrollo de esta gua 2 pginas web donde se aplique la temtica tratada en esta gua (Alineacin, Insercin de imgenes y fondos, hipervnculos, encabezados, ).

    RECURSOS BIBLIOGRAFICO:
    Te invito a que revises el documento Aprende HTML Volando el cual fue enviado a tu correo, este documento sirve de gua para profundizar ms en este lenguaje de etiquetas.

    Pgina 7 de 7

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