[Tutorial] Aprendiendo Desarrollo Web - Modalidad Clase Abierta :cool:

Página 1 de 11 123 ... ÚltimoÚltimo
Resultados 1 al 10 de 102
  1. #1
    Avatar de sansalone NIVEL 48: Buho Sabio
    Fecha de ingreso
    21 ago, 15
    Mensajes
    2,318
    Mencionado
    274 Post(s)
    Tagged
    0 Thread(s)
    Thumbs Up
    Recibidos: 708
    Dados: 5,765
    vBActivity - Stats
    Points
    853
    Level
    10
    vBActivity - Bars
    Lv. Percent
    19.95%
    Actividad Diaria
    0%
    Actividad Semanal
    0%
    Actividad Mensual
    440.89%
    Logros Geek

    [Tutorial] Aprendiendo Desarrollo Web - Modalidad Clase Abierta :cool:

    ¡Buenas a todos!

    Gracias al thread de @facualaniz sobre Programación, nació la idea de iniciar este humilde tutorial, cuyo objetivo es introducir a los lectores al mundo del Desarrollo Web

    Sobra decir que tod@s son bienvenid@s a participar de estas "clases abiertas", @MariON

    Por supuesto quisiera también invitar a mis colegas @Benny, @rchervo, @rolotom, @Nirock y también a @Dali y @fer82 así como a cualquier otr@ forista que quiera aportar sus conocimientos sobre desarrollo o diseño

    Tal y como el título lo dice, la idea es hacer clases abiertas en las cuales cualquiera puede preguntar y cualquiera puede responder (siguiendo el espíritu del foro ).

    En este tutorial, se abarcarán diversos aspectos del Desarrollo Web, comenzando por el esqueleto de todo sitio web: HTML.

    Mi idea es llevar adelante el tutorial a través de 3 módulos:

    - Teoría.

    - Ejercicio Resuelto.

    - Ejercicio propuesto.

    ÍNDICE:

    HTML

    - Tema 1 - Introducción.

    - Tema 2 - Buenas prácticas.

    - Lección 3 - Meta - Párrafos - Heading.

    - Lección 4 - Formato de Texto - Listas - Anclas.

    - Lección 5 - Imágenes e Hipervínculos.

    - Lección 6 - Tablas.

    - Lección 7 - Maquetación.

    - Lección 8 - Controles y Formularios.

    CSS

    - Lección 1 - Introducción.

    - Lección 2 - Conceptos Básicos.

    - Lección 3 - Herencia de reglas - Reglas aplicadas a múltiples marcas - Identificadores

    - Lección 4 - Bordes.

    - Lección 5 - Clases - Fondos - Paleta de colores.

    - Lección 6 - Posición.

    Si queda algo más que agregar, se irá actualizando este primer mensaje

    ¡Ahora sí! ¡Manos a la obra!

    6 Not allowed!

  2. #2
    Avatar de Dali Nivel 22: Los dos patitos
    Fecha de ingreso
    28 jul, 15
    Mensajes
    377
    Mencionado
    254 Post(s)
    Tagged
    0 Thread(s)
    Thumbs Up
    Recibidos: 363
    Dados: 704
    vBActivity - Stats
    Points
    10
    Level
    1
    vBActivity - Bars
    Lv. Percent
    0%
    Actividad Diaria
    0%
    Actividad Semanal
    0.26%
    Actividad Mensual
    1.83%
    HTML wow ando muy oxidado en ese tema de desarrollo web. seremos un foro de diseño :B

    3 Not allowed!

  3. #3
    Avatar de MariON Ex Community Manager
    Fecha de ingreso
    11 may, 15
    Mensajes
    7,075
    Entradas de blog
    3
    Mencionado
    4194 Post(s)
    Tagged
    0 Thread(s)
    Thumbs Up
    Recibidos: 8,415
    Dados: 6,410
    vBActivity - Stats
    Points
    11
    Level
    1
    vBActivity - Bars
    Lv. Percent
    5%
    Actividad Diaria
    0%
    Actividad Semanal
    0.26%
    Actividad Mensual
    1.83%
    Cita Iniciado por sansalone Ver mensaje
    ¡Buenas a todos!

    Gracias al thread de @facualaniz sobre Programación, nació la idea de iniciar este humilde tutorial, cuyo objetivo es introducir a los lectores al mundo del Desarrollo Web

    Sobra decir que tod@s son bienvenid@s a participar de estas "clases abiertas", @MariON

    Por supuesto quisiera también invitar a mis colegas @Benny, @rchervo, @rolotom, @Nirock y también a @Dali y @fer82 así como a cualquier otr@ forista que quiera aportar sus conocimientos sobre desarrollo o diseño

    Tal y como el título lo dice, la idea es hacer clases abiertas en las cuales cualquiera puede preguntar y cualquiera puede responder (siguiendo el espíritu del foro ).

    En este tutorial, se abarcarán diversos aspectos del Desarrollo Web, comenzando por el esqueleto de todo sitio web: HTML.

    Mi idea es llevar adelante el tutorial a través de 3 módulos:

    - Teoría.

    - Ejercicio Resuelto.

    - Ejercicio propuesto.

    Si queda algo más que agregar, se irá actualizando este primer mensaje

    ¡Ahora sí! ¡Manos a la obra!
    Me encanta!!! Deseando empezar!

    3 Not allowed!

  4. #4
    Avatar de fer82 NIVEL 67: Micro SIM
    Fecha de ingreso
    01 nov, 13
    Ubicación
    Belgrano / Nuñez
    Mensajes
    12,798
    Mencionado
    2628 Post(s)
    Tagged
    0 Thread(s)
    Thumbs Up
    Recibidos: 12,349
    Dados: 7,439
    vBActivity - Stats
    Points
    82
    Level
    3
    vBActivity - Bars
    Lv. Percent
    3.75%
    Actividad Diaria
    0%
    Actividad Semanal
    0.26%
    Actividad Mensual
    11.91%
    Logros Geek
    Cita Iniciado por Dali Ver mensaje
    HTML wow ando muy oxidado en ese tema de desarrollo web. seremos un foro de diseño :B
    yo tbn soy abonado a este hilo @sansalone...
    genios!
    aca vamos...
    aprendamos!
    Twitter Movistar https://twitter.com/movistararg
    Facebook Movistar https://es-la.facebook.com/comunidadmovistarargentina
    Tel Movistar 0800 - 321 - 0611
    Tienda Movistar 0800-222-6116
    Web Movistar http://www.movistar.com.ar/


    3 Not allowed!

  5. #5
    Avatar de rolotom Nivel 56: Batigol
    Fecha de ingreso
    23 may, 14
    Ubicación
    San Juan
    Mensajes
    3,675
    Mencionado
    2276 Post(s)
    Tagged
    0 Thread(s)
    Thumbs Up
    Recibidos: 4,464
    Dados: 9,412
    vBActivity - Stats
    Points
    297
    Level
    6
    vBActivity - Bars
    Lv. Percent
    32.21%
    Actividad Diaria
    0%
    Actividad Semanal
    0.26%
    Actividad Mensual
    95.92%
    Logros GeekSabio
    Preparado y listo
    Decir lo que sentimos, sentir lo que decimos;
    Concordar las palabras con la vida. Decir lo que dicta el sentimiento,
    sentir las palabras que salen de nuestras bocas; "Vivir como piensas; pensar como vives".

    3 Not allowed!

  6. #6
    Avatar de Alexis Aranda NIVEL 48: Buho Sabio
    Fecha de ingreso
    10 oct, 15
    Ubicación
    Fortin Olavarria
    Mensajes
    2,302
    Mencionado
    997 Post(s)
    Tagged
    0 Thread(s)
    Thumbs Up
    Recibidos: 2,143
    Dados: 1,126
    vBActivity - Stats
    Points
    102
    Level
    3
    vBActivity - Bars
    Lv. Percent
    55%
    Actividad Diaria
    0%
    Actividad Semanal
    0.26%
    Actividad Mensual
    25.66%
    Logros Geek
    dale quiero aprender mas ! vamos allá!
    Si les gusto la info thumb up y acéptenla como solución.
    ¡Que pasen un buen día!
    Twitter Movistar https://twitter.com/movistararg
    Facebook Movistar https://es-la.facebook.com/comunidadmovistarargentina
    Tel Movistar 0800 - 321 - 0611
    Tienda Movistar 0800 - 999 - 1009
    Web Movistar http://www.movistar.com.ar/

    4 Not allowed!

  7. #7
    Avatar de sansalone NIVEL 48: Buho Sabio
    Fecha de ingreso
    21 ago, 15
    Mensajes
    2,318
    Mencionado
    274 Post(s)
    Tagged
    0 Thread(s)
    Thumbs Up
    Recibidos: 708
    Dados: 5,765
    vBActivity - Stats
    Points
    853
    Level
    10
    vBActivity - Bars
    Lv. Percent
    19.95%
    Actividad Diaria
    0%
    Actividad Semanal
    0%
    Actividad Mensual
    440.89%
    Logros Geek
    Tema: 1 - HTML
    Lección: 1 - Introducción

    HTML es el lenguaje que se emplea para el desarrollo de páginas de internet.

    Este lenguaje está constituido por elementos que el navegador interpreta y despliega en la pantalla de acuerdo a su objetivo. Veremos que hay elementos para disponer imágenes sobre una página, hipervínculos que nos permiten dirigirnos a otra página, listas, tablas para tabular datos, etc.

    Para ponerlo en términos simples, HTML nos permite crear el esqueleto de la página web.

    El código en este lenguaje se introduce por medio de instrucciones, las cuales estarán encerradas en marcas.
    Dichas marcas son: < > (marca de apertura) y </> (marca de cierre). La instrucción se introduce dentro de estos caracteres, ¿a los foristas les suena familiar?
    No todos los elementos HTML estarán encerrados en marcas y no siempre se requerirán ambas marcas para cada elemento, sin embargo generalmente es así.
    Todo aquello que está fuera de las marcas del lenguaje se imprime en la pantalla (dentro del navegador).

    Veamos la estructura básica de una página HTML:

    Código:
    <!DOCTYPE html>
    <html>
                <head>
                            <title>Título de la página</title>
                </head>
                <body>
                            Cuerpo de la página.
                </body>
    </html>
    Estos son los elementos básicos que toda página HTML debe llevar. Todas las páginas tienen como mínimo esta estructura: cabecera y cuerpo.

    Lo primero es el DOCTYPE que informa al navegador que el contenido siguiente se trata de un archivo HTML (todos los navegadores modernos analizan la presencia del DOCTYPE)

    Luego continúa con la marca:<html> y finaliza con la marca:</html> al final del archivo.

    Los fines de marcas tienen el mismo nombre que el comienzo de marca, más el caracter /

    Una página HTML tiene dos secciones muy bien definidas que son la cabecera:

    <head>
    </head>

    Y el cuerpo de la página:

    <body>
    Cuerpo de la página.
    </body>

    En la cabecera es común inicializar el título de la página dentro de las marcas <title></title> (normalmente aparece en la barra superior de nuestro navegador y es utilizado por los motores de búsqueda como Google para indexar la página) El título debe hacer referencia al contenido en sí de la página.

    Todo el texto que dispongamos dentro del <body> aparece dentro del navegador tal cual lo hayamos escrito.

    ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

    ¡Suficiente teoría!

    Vamos a lo interesante

    Por favor, copien el siguiente texto:

    Código:
    <!DOCTYPE html>
    <html>
                <head>
                            <title>Movistar</title>
                </head>
                <body>
                            ¡El Foro Movistar es genial!
                </body>
    </html>
    Y ahora se preguntarán...¿qué hago con esto?

    Muy simple, abrimos el Bloc de Notas (sí, el de la PC) y pegamos allí el texto copiado. Luego, guardamos este documento con el siguiente nombre: clase1.html

    Es muy importante que la extensión del archivo no sea .txt como los documentos usuales del Bloc de Notas, sino .html, el cual identifica dicho archivo como un html justamente.

    Una vez que el archivo fue guardado, vamos a la ubicación, ¿se ve algo peculiar? Si todo está en orden, el archivo debería aparecer con el ícono del explorador predeterminado, como Chrome o Internet Explorer.



    Al abrir el archivo, de inmediato se abre el navegador, ejecutando las instrucciones que le dimos.



    Podemos observar que la pestaña lleva el nombre del título introducido en la marca <title>, mientras que el texto de la página es el que está dentro del <body>.

    ¡Felicidades! ¡Tu primer HTML está listo!

    ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

    ¡A practicar!

    Ejercicio propuesto:

    1) Crear un archivo HTML, usando las marcas ya vistas, con el título que quieras y en el cuerpo escribir lo que que gustes.

    2) Crear un archivo HTML, usando las marcas ya vistas, con el título que quieras y en el cuerpo, es decir dentro de las marcas body, escribir lo siguiente:

    ¡El foro Movistar es genial!
    ¡Gracias a MariON y a GabrielF!

    Al abrirlo, ¿notan algo raro?

    Exacto, a pesar de que lo escribimos en líneas separadas se ve todo en la misma línea.

    ¿Solución? Esta vez dentro de las marcas body pegamos lo siguiente:

    ¡El foro Movistar es genial!
    <br>
    ¡Gracias a MariON y a GabrielF!

    ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

    Es todo por ahora

    ¿Dudas?

    ¿Algún colega desea aportar algo más sobre lo tratado en este post?

    Fuente: http://www.htmlya.com.ar/temarios/de...cod=68&punto=1

    1 Not allowed!

  8. #8
    Avatar de Alexis Aranda NIVEL 48: Buho Sabio
    Fecha de ingreso
    10 oct, 15
    Ubicación
    Fortin Olavarria
    Mensajes
    2,302
    Mencionado
    997 Post(s)
    Tagged
    0 Thread(s)
    Thumbs Up
    Recibidos: 2,143
    Dados: 1,126
    vBActivity - Stats
    Points
    102
    Level
    3
    vBActivity - Bars
    Lv. Percent
    55%
    Actividad Diaria
    0%
    Actividad Semanal
    0.26%
    Actividad Mensual
    25.66%
    Logros Geek
    muy bueno ya lo voy a poner en practica jeje
    Si les gusto la info thumb up y acéptenla como solución.
    ¡Que pasen un buen día!
    Twitter Movistar https://twitter.com/movistararg
    Facebook Movistar https://es-la.facebook.com/comunidadmovistarargentina
    Tel Movistar 0800 - 321 - 0611
    Tienda Movistar 0800 - 999 - 1009
    Web Movistar http://www.movistar.com.ar/

    3 Not allowed!

  9. #9
    Avatar de Alexis Aranda NIVEL 48: Buho Sabio
    Fecha de ingreso
    10 oct, 15
    Ubicación
    Fortin Olavarria
    Mensajes
    2,302
    Mencionado
    997 Post(s)
    Tagged
    0 Thread(s)
    Thumbs Up
    Recibidos: 2,143
    Dados: 1,126
    vBActivity - Stats
    Points
    102
    Level
    3
    vBActivity - Bars
    Lv. Percent
    55%
    Actividad Diaria
    0%
    Actividad Semanal
    0.26%
    Actividad Mensual
    25.66%
    Logros Geek
    no me salio muy bien pero bueno despues hago otro me voy a la escuela me que da aca a la vuelta entro y media chauuuuuuuuuuuuuuuuuuuuuuuuuu
    Si les gusto la info thumb up y acéptenla como solución.
    ¡Que pasen un buen día!
    Twitter Movistar https://twitter.com/movistararg
    Facebook Movistar https://es-la.facebook.com/comunidadmovistarargentina
    Tel Movistar 0800 - 321 - 0611
    Tienda Movistar 0800 - 999 - 1009
    Web Movistar http://www.movistar.com.ar/

    3 Not allowed!

  10. #10
    Avatar de sansalone NIVEL 48: Buho Sabio
    Fecha de ingreso
    21 ago, 15
    Mensajes
    2,318
    Mencionado
    274 Post(s)
    Tagged
    0 Thread(s)
    Thumbs Up
    Recibidos: 708
    Dados: 5,765
    vBActivity - Stats
    Points
    853
    Level
    10
    vBActivity - Bars
    Lv. Percent
    19.95%
    Actividad Diaria
    0%
    Actividad Semanal
    0%
    Actividad Mensual
    440.89%
    Logros Geek
    Cita Iniciado por Alexis Aranda Ver mensaje
    no me salio muy bien pero bueno despues hago otro me voy a la escuela me que da aca a la vuelta entro y media chauuuuuuuuuuuuuuuuuuuuuuuuuu
    Uy, ok. Cuando puedas por favor contá que fue lo que salió mal o si hay algo que no se entendió bien.

    Saludos!

    2 Not allowed!

Permisos de publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •