Scribd Logo
Unggah

Selamat datang di Scribd!

  • Course Categories PDF

    Diunggah oleh

    Julia Dorsey
    11 tayangan10 halaman

    Judul Asli

    Course Categories.pdf

    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

    Hak Cipta:

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

    Course Categories PDF

    Diunggah oleh

    Julia Dorsey

    Hak Cipta:

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

    Course Categories

    Create a Course
    Corporate Learning
    Mobile


    Tutorial de HTML5 para Principiantes:
    Cree una Sencilla Pgina Web HTML5 en
    30 Minutos
    DECEMBER 27, 2013 BY KASIA MIKOLUK
    Si le pregunta a un desarrollador
    web, probablemente le diga que HTML5 es lo mejor que le ha pasado a la
    humanidad desde la invencin de la imprenta. HTML5 le ayuda a crear
    pginas web y aplicaciones potentes e interactivas provisto de las virtudes
    de CSS3 y jQuery. Se utiliza en cada nuevo sitio/aplicacin web y es un
    conocimiento clave para cualquier desarrollador web. Puede dominar
    HTML5 apuntndose al curso Aprende HTML5 y CSS3 desde
    cero y paso a paso.
    En este tutorial HTML5 para principiantes, crearemos una sencilla pgina
    web con la estructura bsica de HTML5.
    Lo Que Necesitar
    Conocimiento bsico de etiquetas HTML como <div></pre> y
    <pre></div><pre>
    Conocimiento bsico de CSS
    Un editor de texto como Notepad o Notepad++. Puede usar tambin
    un editor web profesional como Adobe Dreamweaver.
    Creando una Sencilla Web HTML5
    La mejor manera de aprender algo es de hecho hacindolo. Con esto en
    mente, entraremos de lleno en este tutorial y crearemos nuestra propia
    web HTML5.
    En primer lugar, cree un documento nuevo en su editor de texto favorito.
    Le recomendamos de forma especial Notepad++, una alternativa gratuita
    a Notepad.
    En el documento en blanco, copie y pegue el siguiente cdigo:
    <!DOCTYPE html>
    <html lang=en>
    <head>
    <meta charset=utf-8>
    <title>Awesome HTML5 Webpage</title>
    <meta name=description content=An awesome HTML5 page YOU
    built from scratch!>
    <meta name=author content=Udemy>
    <link rel=stylesheet href=style.css>
    </head>
    <body>
    <div id=wrapper>
    <header class=main_headline>
    <nav>
    <ul>
    <li><a
    href=#>About</a></li>
    <li><a
    href=#>Services</a></li>
    <li><a
    href=#>Products</a></li>
    <li><a
    href=#>Contact</a></li>
    </ul>
    </nav>
    <h1>Super Duper Awesome Headline! </h1>
    </header>
    <div id=primary_content>
    <section id=left_column>
    <h3>A Hitchhikers Guide!</h3>
    <p>To the Galaxy!</p>
    </section>

    <section id=right_column>
    <article>
    <header>
    <h3>The Answer to Life?</h3>
    <p>Published: 30 August 2013</p>
    </header>
    <p>Douglas Adams, when
    asked: What is the answer to life, universe and everything,
    replied:</p>
    <blockquote>42</blockquot
    e>
    </article>
    </section>
    </div>

    <footer>
    <p>The Footer is where all useless info
    goes!</p>
    </footer>
    </div>
    </body>
    </html>
    Confundido? No se preocupe. Examinaremos cada lnea de cdigo a
    continuacin.
    Sltese la curva de aprendizaje apuntndose a este curso Gratuito
    sobre las Bases de HTML5.
    Entendiendo el Cdigo HTML5
    Empecemos por el principio:
    <!DOCTYPE html>
    La Cabecera
    Esta sencilla etiqueta simplemente le dice al explorador Hey, esto es una
    pgina web HTML, as que ms vale que la muestres correctamente! Con
    HTML5, esta etiqueta se ha simplificado muchsimo. Si tuvieras que usar
    HTML4, probablemente tendras que escribir algo como
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    http://www.w3.org/TR/html4/loose.dtd">
    Demasiado para asimilar de una vez, verdad? Por eso HTML5 es el
    mejor!
    <meta charset=utf-8>
    La etiqueta meta del juego de caracteres permite al explorador usar la
    codificacin apropiada. No se preocupe mucho con esta etiqueta, tan slo
    asegrese de incluirla en su pgina web!
    <title>Awesome HTML5 Webpage</title>
    La etiqueta <title> debera serle familiar es el texto que se muestra en la
    parte superior de la ventana del explorador. Esta etiqueta es vital para el
    SEO, as que asegrese de elegir las palabras clave correctamente.
    <meta name=description content=An awesome HTML5 page YOU built
    from scratch!>
    <meta name=author content=Udemy>
    La primera etiqueta meta, como quizs sepa, da una breve descripcin de
    la pgina web. Aunque tiene beneficios autnticos en trminos de SEO, los
    motores de bsqueda a menudo muestran esta descripcin en los
    resultados de bsqueda, as que es una buena prctica a incorporar en sus
    pginas web.
    La segunda etiqueta meta, autor, le indica al explorador el autor de la
    pgina. Aqu, hemos usado Udemy, pero debera usar su nombre o el
    nombre de su empresa en la propiedad content.
    <link rel=stylesheet href=style.css>
    No hay grandes cambios de HTML4 a HTML5 en la etiqueta link que se
    utiliza para indicar ficheros externos. Aqu, estamos usando la etiqueta
    para referirnos a una hoja de estilo CSS almacenada externamente,
    style.css.
    Eso es todo en cuanto a la seccin <head>. Ahora echemos un vistazo a
    <body>!
    El Contenido Principal
    <div id=wrapper>
    <div> como los veteranos de HTML4 sabrn, es una etiqueta que se
    utiliza para identificar una parte concreta de una pgina web. Una
    divisin puede ser tan grande o pequea como quiera puede incluir una
    pgina web entera, o slo la primera lnea de un prrafo. Aqu, hemos
    creado un <div> con un id CSS wrapper Este envoltorio especifica el
    ancho de la pgina completa y encierra todo el contenido.
    Preocupado por los distintos anchos de su web? Domine el diseo
    web responsive con HTML5 y CSS3 con este curso y consiga que
    su pgina web se vea bien en cualquier plataforma!
    <header class=main_headline>
    <header> es una nueva etiqueta en HTML5. Aunque no tiene una funcin
    concreta, consigue una pgina web ms semntica. Incluya la etiqueta
    <header> en cualquier lugar donde se refiera a una cabecera el ttulo
    principal, el subttulo, etc.
    Aqu, hemos asignado tambin a la cabecera una clase main_headline.
    [Nota: la diferencia entre id y class es que un id slo puede usarse una
    sola vez en la pgina web, mientras que una clase puede usarse tantas
    veces como quiera.]
    <nav>
    Siguiendo con el objetivo de HTML5 de crear una web ms semntica, la
    etiqueta <nav> se introdujo para hacer referencia al men de navegacin.
    Como la etiqueta <header>, no tiene ms funcin que identificar el men
    de navegacin y facilitar la personalizacin del estilo.
    Despus de la etiqueta <nav>, hemos usado una simple lista desordenada
    para crear los elementos del men. Esto debera ser familiar para
    cualquier persona con experiencia anterior con HTML, as que no
    profundizaremos en ello.
    <div id=primary_content>
    Otra etiqueta <div> para identificar el contenido principal de la cabecera
    y aplicar CSS a medida.
    <section id=left_column>
    La etiqueta <section> es otra etiqueta nueva introducida en HTML5.
    Como el nombre sugiere, se usa para referirse a cualquier seccin de la
    pgina web (en este ejemplo, una columna flotante izquierda).
    Funcionalmente, es igual que <pre><div></pre> pero tiene ms
    coherencia semntica.
    <article>
    Esta es una etiqueta HTML5 que se refiere a una pieza autnoma de
    contenido en una pgina web. Normalmente, esto comprende
    publicaciones de blogs, artculos, publicaciones de foros, etc. Puede usarlo
    como un <pre><div></pre>. Aqu, lo hemos usado para indicar el
    contenido principal de la pgina web.
    <footer>
    <footer> es otra etiqueta semntica HTML5 que se usa para identificar el
    rea del pie. Aunque pueda usar <div>, <footer> es ms fcil de leer,
    tanto para los navegadores como para sus compaeros desarrolladores.
    Eso es todo! Usted ya ha realizado su pgina web HTML5!
    Guarde su pgina como index.html en su Escritorio (asegrese de que
    selecciona Todos los Ficheros en lugar de Fichero de Texto en el cuadro
    de dilogo de guardado si usa Notepad). Haga doble-click para abrirlo en
    su navegador. Si hizo todo lo anterior, debera ver la siguiente pgina web:

    No muy bonita, verdad? Para ello, deber usar CSS para crear una hoja
    de estilo personalizada (style.css) y enlazarla. El CSS bsico es bastante
    sencillo, y este curso HTML5, CSS3 y Javascript le ayudar a ser todo
    un experto en ello.
    Hasta aqu llega nuestro tutorial HTML5 para principiantes. Crear una
    pgina sencilla es slo el punto de partida; HTML5 puede ayudarte a
    desarrollar increbles apps, pginas web interactivas, y mucho ms.
    Cul es tu manera favorita de usar HTML5? Comprtelo con nosotros en
    los comentarios ms abajo!!
    You may also like...
    Preguntas de Entrevista Ms Frecuentes
    Sobre Consultas SQL En Puestos Relacionados con Base de
    Datos
    Rangos en Excel VBA: Cmo Usar los
    Rangos en VBA
    Tutorial de Macros Excel: Cmo Crear una
    Sencilla Macro en Excel 2013
    Tutorial de Android SQLite para
    Principiantes
    JSON vs XML: Cmo JSON es Superior a
    XML
    gil Vs. En Cascada: Evaluando Los Pros y
    Los Contras
    Anunciando el Consejo de Instructores y
    otras excitantes novedades

    Anda mungkin juga menyukai