Scribd Logo
Unggah

Selamat datang di Scribd!

  • Herramientas para Trabajar Con HTML5

    Diunggah oleh

    alberto lovera
    119 tayangan11 halaman
    telefonica

    Judul Asli

    Herramientas Para Trabajar Con HTML5

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    telefonica

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    119 tayangan11 halaman

    Herramientas para Trabajar Con HTML5

    Diunggah oleh

    alberto lovera
    telefonica

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 11

    Herramientas para

    trabajar con HTML5


    ndice
    1 | Herramientas para trabajar con HTML5 3

    1.1 | Creacin de una pgina en HTML5 con 4


    Eclipse

    1.2 | Herramientas de edicin: Eclipse 6

    1.3 | Introduccin a HTML 8

    1.4 | Marcado HTML 9


    Herramientas para trabajar con HTML5 | TELEFNICA // 3

    1. Herramientas para trabajar con HTML5


    Para trabajar con HTML5 vamos a usar el entorno Eclipse. Se trata de un entorno de desarrollo
    multiplataforma y permite desarrollar en mltiples lenguajes tanto de programacin como de
    marcado, uso de UML, etc.

    El IDE eclipse es de libre distribucin y puede mediante la implementacin de los plugins


    descargarse desde su web oficial (www. adecuados. La arquitectura de plugins
    eclipse.org), ms concretamente la versin de Eclipse permite, adems de integrar
    para desarrolladores J2EE. Esta versin diversos lenguajes sobre un mismo IDE,
    contiene una serie de plugins preinstalados introducir otras aplicaciones accesorias
    para desarrollo de aplicaciones web con que pueden resultar tiles durante el
    Java. Aunque el lenguaje Java se encuentra proceso de desarrollo como: herramientas
    fuera del mbito de este curso, esta versin UML, editores visuales de interfaces,
    tambin contiene el editor para HTML5, ayuda en lnea para libreras, etc.
    que es la funcionalidad que vamos a usar.
    El IDE Eclipse es, nicamente, una de las
    En la web oficial de Eclipse, se define herramientas que se engloban bajo el
    como An IDE for everything and nothing denominado Proyecto Eclipse. El Proyecto
    in particular (un IDE para todo y para Eclipse ana tanto el desarrollo del IDE
    nada en particular). Eclipse es, en el fondo, Eclipse como de algunos de los plugins
    nicamente un armazn (workbench) sobre mas importantes (como el JDT, plugin para
    el que se pueden montar herramientas el lenguaje Java, o el CDT, plugin para el
    de desarrollo para cualquier lenguaje, lenguaje C/C++).
    Herramientas para trabajar con HTML5 | TELEFNICA // 4

    Este proyecto tambin alcanza a las libreras que sirven como base En concreto, permite:
    para la construccin del IDE Eclipse (pero pueden ser utilizadas
    Crear paginas HTML 5 con una nueva plantilla.
    de forma completamente independiente), como por ejemplo, la
    librera de widgets SWT. Proporciona autocompletado de cdigo para los elementos de
    HTML5.
    A partir de la versin Helios del IDE de Eclipse y superiores (con
    los plugins para desarrolladores de Java EE) proporciona soporte Ofrece un editor de propiedades para los atributos de HTML5.
    para el desarrollo de HTML5. Las versiones anteriores tambin
    Ofrece un editor WYSIWYG para el desarrollo visual de pginas
    tienen un editor de HTML, pero no admite HTML 5.
    HTML5.

    1.1 | Creacin de una pgina en HTML5 con Eclipse


    Crear un documento HTML 5 es fcil. Simplemente hay que seguir Seleccione nuevo archivo HTML5 para la plantilla y hacer click en
    estos pasos: finish para terminar.
    Seleccione File New Other.
    Expandir Web y seleccione un archivo HTML. Haga clic en Next.
    Escriba un nombre de archivo, seleccione la carpeta principal y
    haga click en next.

    ILUSTRACIN: NUEVO DOCUMENTO HTML5 (2)

    ILUSTRACIN: NUEVO DOCUMENTO HTML5 (1)


    Herramientas para trabajar con HTML5 | TELEFNICA // 5

    El archivo se abrir con el editor de HTML, que proporciona


    resaltado de sintaxis (aade diferentes colores y tipos de letra en
    funcin del elemento que se muestra). Las etiquetas se muestran <!DOCTYPE html>
    en verde, los atributos de color morado, los valores de los atributos <html>
    de color azul, y los valores de los elementos en negro. <head>
    Hay que tener en cuenta que el documento contiene el elemento <meta charset=UTF-8>
    DOCTYPE nuevo que se utiliza. Tambin contiene el elemento <title>Insert title here</title>
    meta simplificado que se utiliza para especificar la codificacin de </head>
    caracteres UTF-8. <body>

    </body>
    </html>

    ILUSTRACIN: NUEVO DOCUMENTO HTML5 (3)


    Herramientas para trabajar con HTML5 | TELEFNICA // 6

    1.2 | Herramientas de edicin: Eclipse


    Vamos a ver algunas de las herramientas que el plugin nos proporciona:

    Es el resultado de la sintaxis. Las palabras reservadas y signos


    correspondientes al estndar aparecen resaltados en color. El
    resto del texto en negro.
    Autocompletado de etiquetas. Basta con pulsar ctrl + espacio y
    una lista de elementos HTML5 validos aparecern listados. Si ya
    hemos escrito parte de la etiqueta, nos lo autocompletara si slo
    hay una etiqueta que empieza por el texto escrito. Si hay ms
    de una, aparecer un listado nicamente con las coincidencias.
    Slo nos mostrarn las etiquetas permitidas en el lugar en el que
    estamos editando.

    ILUSTRACIN: AUTOCOMPLETADO DE ETIQUETAS


    Herramientas para trabajar con HTML5 | TELEFNICA // 7

    Autocompletado de atributos. Funciona exactamente igual que


    con las etiquetas, solo que debemos estar editando dentro de la
    declaracin de una etiqueta.

    ILUSTRACIN: AUTOCOMPLETADO DE ATRIBUTOS


    Herramientas para trabajar con HTML5 | TELEFNICA // 8

    1.3 | Introduccin a HTML


    HTML (HiperText Markup Languaje). Su nombre se traduce literalmente como Lenguaje de marcado
    de hipertexto.

    Se encuentra enmarcado en los llamados lenguajes de marcado. Los Es independiente de la plataforma ya que HTML solo genera
    lenguajes de marcado son los utilizados para generar documentos documentos de texto y admite cualquier codificacin de caracteres.
    en los que, junto con el texto que constituye el contenido, se incluyen
    El proceso de alterar la informacin de una pgina es relativamente
    etiquetas o marcas que contienen informacin adicional sobre la
    sencillo y gil ya que es un lenguaje de fcil comprensin.
    estructura del contenido.
    Basa su contenido en referenciacion. Si en una pgina HTML,
    En el caso de HTML, se trata concretamente de un lenguaje de
    queremos introducir algn elemento como una imagen, script,
    marcado de presentacin, en el que las etiquetas que acompaan
    video, u otra pgina HTML (por ejemplo), no se incluye su contenido
    al texto indican al navegador informacin de cmo se encuentra
    directamente en ella si no que se referencia (se indica donde est el
    organizado.
    contenido que queremos incluir). El navegador es el encargado de
    Es un estndar desarrollado y regulado por la W3C, que es un interpretar las referencias y cargarlas componiendo la visualizacin
    organismo dedicado a la estandarizacin de las tecnologas final.
    utilizadas en la Web.
    Al ser un estndar, uno de sus objetivos es la compatibilidad hacia
    Una de las caractersticas principales del lenguaje es que las pginas atrs (o retro-compatibilidad). Un navegador que es capaz de
    generadas con HTML son de hipertexto. Esto quiere decir que una interpretar una versin de HTML, debe ser capaz de interpretar
    pgina no contiene un texto aislado, sino que estn o pueden estar pginas escritas en cualquiera de sus versiones anteriores.
    enlazadas a otras pginas y ser referenciadas desde otras pginas
    mediante enlaces o links. Esto nos permite navegar por ellas.
    Herramientas para trabajar con HTML5 | TELEFNICA // 9

    1.4 | Marcado HTML


    El marcado HTML se realiza mediante etiquetas de apertura y cierre. Todo lo que se encuentra dentro
    de una etiqueta de apertura y cierre se encuentra afectado por ella, incluyendo texto plano y cualquier
    otra etiqueta que pueda contener.

    Una etiqueta de apertura se define con un nombre de etiqueta Entre la etiqueta de apertura y la de cierre, se encuentra el contenido.
    encerrado entre los corchetes angulares < y > (signo menor que y El contenido puede ser texto u otras etiquetas. Una etiqueta con
    signo mayor que) contenido tiene el siguiente formato:

    Ejemplo: <body> Ejemplo: <etiqueta>contenido</etiqueta>

    Una etiqueta de cierre se define con el corchete angular de apertura Si entre la etiqueta de apertura y la de cierre no se aade ningn
    < seguido del carcter barra /, el nombre de etiqueta y finalmente contenido, se puede declarar con un corchete angular de apertura
    el corchete angular de cierre. < seguido del nombre de la etiqueta, una barra / y finalmente el
    corchete angular de cierre.
    Ejemplo: </body>
    Ejemplo: <br />
    Herramientas para trabajar con HTML5 | TELEFNICA // 10

    Los atributos aaden informacin adicional a una etiqueta. Cada A continuacin vemos dos ejemplos de pgina que van a versiones
    etiqueta admite una serie de atributos. Se aaden nicamente a las diferentes de HTML:
    etiquetas de apertura, justo despus del nombre. Se admite ms
    de un atributo por etiqueta. Siguen el esquema clave / valor de la
    siguiente forma: clave: valor.
    <!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01
    Transitional//EN http://www.w3.org/TR/html4/loose.
    Ejemplo: <img src=logo.gif></img> dtd>
    <html>
    <head>
    Por ejemplo, supongamos que tenemos el siguiente cdigo HTML:
    <title>login</title>
    <meta http-equiv=Content-Type content=text/
    html; charset=ISO-8859-1>
    </head>
    <a href=http://httpd.apache.org>enlace a
    la pgina de apache</a> ILUSTRACIN: DEFINICIN DE DOCUMENTO EN HTML 4.01

    El texto que se encuentra encerrado entre la etiqueta de apertura


    <a> y la etiqueta de cierre </a>, ser interpretado por el navegador
    como un enlace. El atributo href indica la pagina a la que referencia <!DOCTYPE html>
    el enlace. <html>
    <head>
    En un fichero que va a contener un documento HTML, debemos definir <title>login</title>
    en la primera lnea cual es la versin de HTML que vamos a utilizar. <meta charset=UTF-8>
    De esta forma, el navegador podr interpretarlo correctamente. </head>
    Tambin es til aadir el tipo de documento a la hora de desarrollar
    puesto que el editor de HTML que usemos, podr validar si lo que ILUSTRACIN: DEFINICIN DE DOCUMENTO HTML5
    escribimos es correcto.

    Anda mungkin juga menyukai