[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 51: Arquero Manco
    Fecha de ingreso
    21 ago, 15
    Ubicación
    ...
    Mensajes
    2,623
    Mencionado
    297 Post(s)
    Tagged
    0 Thread(s)
    Thumbs Up
    Recibidos: 745
    Dados: 6,176
    vBActivity - Stats
    Points
    936
    Level
    10
    vBActivity - Bars
    Lv. Percent
    62.45%
    Actividad Diaria
    0%
    Actividad Semanal
    111.29%
    Actividad Mensual
    258.05%
    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!
    Canales de Atención de Movistar

    Redes sociales:

    Twitter: https://www.twitter.com/movistararg
    Facebook: https://www.facebook.com/comunidadmovistarargentina

    Desde un teléfono fijo: 0800-321-0611
    Desde tu celular: *611



    ¿Te gustaría hacer tu propia página web? ¡Aprendé en el tutorial de desarrollo web del foro!

    6 Not allowed!

  2. #2
    Avatar de Dali Nivel 22: Los dos patitos
    Fecha de ingreso
    28 jul, 15
    Mensajes
    377
    Mencionado
    255 Post(s)
    Tagged
    0 Thread(s)
    Thumbs Up
    Recibidos: 363
    Dados: 704
    vBActivity - Stats
    Points
    135
    Level
    4
    vBActivity - Bars
    Lv. Percent
    24.1%
    Actividad Diaria
    0%
    Actividad Semanal
    0.81%
    Actividad Mensual
    0.88%
    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
    4196 Post(s)
    Tagged
    0 Thread(s)
    Thumbs Up
    Recibidos: 8,415
    Dados: 6,410
    vBActivity - Stats
    Points
    472
    Level
    7
    vBActivity - Bars
    Lv. Percent
    83.1%
    Actividad Diaria
    0%
    Actividad Semanal
    0%
    Actividad Mensual
    0.31%
    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,819
    Mencionado
    2696 Post(s)
    Tagged
    0 Thread(s)
    Thumbs Up
    Recibidos: 12,372
    Dados: 7,460
    vBActivity - Stats
    Points
    269
    Level
    6
    vBActivity - Bars
    Lv. Percent
    5.96%
    Actividad Diaria
    0%
    Actividad Semanal
    0.81%
    Actividad Mensual
    5.6%
    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,813
    Mencionado
    2384 Post(s)
    Tagged
    0 Thread(s)
    Thumbs Up
    Recibidos: 4,632
    Dados: 9,722
    vBActivity - Stats
    Points
    329
    Level
    6
    vBActivity - Bars
    Lv. Percent
    63.27%
    Actividad Diaria
    0%
    Actividad Semanal
    2.16%
    Actividad Mensual
    99.6%
    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,329
    Mencionado
    1062 Post(s)
    Tagged
    0 Thread(s)
    Thumbs Up
    Recibidos: 2,175
    Dados: 1,126
    vBActivity - Stats
    Points
    240
    Level
    5
    vBActivity - Bars
    Lv. Percent
    72.32%
    Actividad Diaria
    0%
    Actividad Semanal
    18.32%
    Actividad Mensual
    37.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 51: Arquero Manco
    Fecha de ingreso
    21 ago, 15
    Ubicación
    ...
    Mensajes
    2,623
    Mencionado
    297 Post(s)
    Tagged
    0 Thread(s)
    Thumbs Up
    Recibidos: 745
    Dados: 6,176
    vBActivity - Stats
    Points
    936
    Level
    10
    vBActivity - Bars
    Lv. Percent
    62.45%
    Actividad Diaria
    0%
    Actividad Semanal
    111.29%
    Actividad Mensual
    258.05%
    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
    Canales de Atención de Movistar

    Redes sociales:

    Twitter: https://www.twitter.com/movistararg
    Facebook: https://www.facebook.com/comunidadmovistarargentina

    Desde un teléfono fijo: 0800-321-0611
    Desde tu celular: *611



    ¿Te gustaría hacer tu propia página web? ¡Aprendé en el tutorial de desarrollo web del foro!

    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,329
    Mencionado
    1062 Post(s)
    Tagged
    0 Thread(s)
    Thumbs Up
    Recibidos: 2,175
    Dados: 1,126
    vBActivity - Stats
    Points
    240
    Level
    5
    vBActivity - Bars
    Lv. Percent
    72.32%
    Actividad Diaria
    0%
    Actividad Semanal
    18.32%
    Actividad Mensual
    37.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,329
    Mencionado
    1062 Post(s)
    Tagged
    0 Thread(s)
    Thumbs Up
    Recibidos: 2,175
    Dados: 1,126
    vBActivity - Stats
    Points
    240
    Level
    5
    vBActivity - Bars
    Lv. Percent
    72.32%
    Actividad Diaria
    0%
    Actividad Semanal
    18.32%
    Actividad Mensual
    37.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 51: Arquero Manco
    Fecha de ingreso
    21 ago, 15
    Ubicación
    ...
    Mensajes
    2,623
    Mencionado
    297 Post(s)
    Tagged
    0 Thread(s)
    Thumbs Up
    Recibidos: 745
    Dados: 6,176
    vBActivity - Stats
    Points
    936
    Level
    10
    vBActivity - Bars
    Lv. Percent
    62.45%
    Actividad Diaria
    0%
    Actividad Semanal
    111.29%
    Actividad Mensual
    258.05%
    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!
    Canales de Atención de Movistar

    Redes sociales:

    Twitter: https://www.twitter.com/movistararg
    Facebook: https://www.facebook.com/comunidadmovistarargentina

    Desde un teléfono fijo: 0800-321-0611
    Desde tu celular: *611



    ¿Te gustaría hacer tu propia página web? ¡Aprendé en el tutorial de desarrollo web del foro!

    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
  •