Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Documento 1 PDF

    Cargado por

    OscarAlvarez
    13 vistas7 páginas

    Título original

    DOCUMENTO 1.pdf

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    13 vistas7 páginas

    Documento 1 PDF

    Cargado por

    OscarAlvarez

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 7

    ¡Intentalo!

    Todos los ejercicios del curso HTML y CSS

    Universidad de Duke

    Fundamentos de programación con JavaScript, HTML y CSS Módulo 2:


    Diseño de páginas web con HTML y CSS

    ¡Intentalo! Crea tu cuenta Codepen


    Cree su propia cuenta de Codepen para que pueda crear páginas web con HTML y CSS en este módulo.

    1. Ir a http://codepen.io/ .
    2. Haga clic en "Registrarse", en la parte superior derecha de la página de inicio de Codepen.

    3. En la página "Registrarse", desplácese hacia abajo pasando las opciones del plan de pago y haga clic en "Registrarse" en la opción "Plan gratuito".

    4. Complete el formulario de registro y haga clic en "Registrarse".

    5. A continuación, se le pedirá que complete una página de perfil. Esto es opcional. Ya sea que decida completar un
    perfil o no, haga clic en "Guardar y continuar".
    6. ¡Ahora puede crear páginas web en Codepen! Haga clic en "Nuevo lápiz" para comenzar a crear una nueva página web
    con HTML y CSS.

    1
    ¡Nos vemos en el próximo video!

    ¡Intentalo! Crear una página web "Mis intereses"

    Esperamos que esté emocionado de crear su propia página web en CodePen. En el transcurso de esta semana, creará una
    página web "Mis intereses", compartiendo información, imágenes y enlaces sobre cosas que disfruta. ¡Al final del módulo,
    compartirás tu página web terminada con tus compañeros de clase!

    Una vez que haya creado su cuenta y haya visto nuestra conferencia Uso de CodePen, inicie sesión en

    http://codepen.io y haga clic en "Nuevo lápiz" en la parte superior de la página para comenzar.

    Comience asignando un nombre personalizado a su lápiz en la parte superior del lápiz y luego siga los pasos que se describen a continuación. ¡Recuerde

    guardar su trabajo con frecuencia! Si necesita ayuda para recordar cómo escribir las etiquetas que se muestran en el último video, visite nuestra página de

    documentación, vinculada en el R recursos t ab.

    Agregar elementos seccionales y párrafos


    Comencemos a agregar contenido al cuerpo de su página web. Entre sus etiquetas corporales:
    A. Agregue al menos 2 divs . Recuerde que los divs se usarán más tarde para diseñar diferentes partes de su

    página web de manera diferente (por ejemplo, tener una fuente de texto, color o tamaño diferente, o un color de fondo diferente

    para el contenido de la página web entre las etiquetas div).

    SI. Dentro de cada div:

    a. Agregue al menos un encabezado. Juega con diferentes tamaños de encabezado (p. Ej., H1, h2 ...

    h6).
    si. Agregue al menos un párrafo.
    C. ¿Necesitas ayuda? Aquí hay una página de ejemplo: h ttp: //codepen.io/quentinre/pen/zKYLNw . Aprender
    de este ejemplo, ¡pero asegúrese de escribir su propio HTML! Es la mejor forma de aprender.
    a. ¡Obtén ayuda en los foros! Haga sus preguntas y comparta sus bolígrafos en el curso
    foros.

    Etiquetas de metadatos

    Debido a que Codepen es una herramienta para crear sitios web, Codepen ya está creando varias etiquetas de metadatos para usted, incluidas las

    etiquetas html, head, title y body. Para ver estas etiquetas de metadatos para su publicación, haga clic en Exportar >> Exportar .zip en la

    esquina inferior derecha de su lápiz, como se ve aquí.

    2
    Una vez que descargue el archivo .zip, abra el archivo .html dentro del archivo .zip llamado "índice" usando un editor de texto como corchetes ( http://brackets.io/

    ). A continuación se muestra un ejemplo de la exportación HTML. Aviso:

    1. Todo el código HTML está entre etiquetas <html> </html>.

    2. El nombre de su pluma se incluye entre las etiquetas <title> </title>.


    3. Todo el HTML que escribió para su página web se encuentra entre las etiquetas <body> </body>.
    4. Si estuviera creando una página web HTML sin Codepen, necesitaría escribir estas etiquetas de metadatos usted
    mismo.

    3
    ¡Nos vemos en el próximo video!

    ¡Intentalo! Dar formato al texto

    Continúe construyendo su página web "Mis intereses" en Codepen ( http://codepen.io/ ). Haga clic en el icono de su avatar en la parte superior

    del sitio web y seleccione "Bolígrafos" para encontrar la página web que ya comenzó a crear.

    4
    1. Pon texto en negrita .
    2. Enfatiza algún texto.
    3. Experimente con etiquetas anidadas.

    ¿Necesitas ayuda? Asegúrese de consultar nuestra página de documentación para HTML:

    http://www.dukelearntoprogram.com/course1/doc/#basichtml .

    ¡Intentalo! Agregar enlaces e imágenes

    Agregar enlaces

    Agrega algunos enlaces a tu página "Mis intereses" , enlaces a otras páginas web relacionadas con algunos de sus intereses.

    Nota: para dar formato a los enlaces para que se abran en una nueva ventana / pestaña, escriba sus etiquetas <a> de la siguiente manera:

    <a href="http://www.dukelearntoprogram.com/" target="_blank”> Aprende a programar de Duke </a>

    Añadir imágenes

    A continuación, agregue imágenes a su página "Mis intereses" . Considere agregar imágenes que representen elementos que agregó a

    su página original. Debe utilizar lo que sabe sobre la etiqueta <img> en HTML (consulte nuestra página de documentación para un repaso:

    http://www.dukelearntoprogram.com/course1/doc/#basichtml ) . Puede usar sus propias imágenes o buscar algunas imágenes en


    línea. Wikimedia Commons
    ( https://commons.wikimedia.org/wiki/Main_Page ) y Pixabay ( h ttps: //pixabay.com ) son dos
    grandes recursos, ¡pero hay muchos, muchos más!

    Deberá alojar sus imágenes en algún lugar en línea. Los alumnos han sugerido los siguientes sitios de alojamiento de imágenes
    para este curso:
    ● https://www.flickr.com/
    ● http://postimage.org/
    ● http://photobucket.com/

    5
    ● https://www.dropbox.com/
    ● https://www.base64image.de/
    ● http://tinypic.com/

    ¡Desafío extra!
    Experimente cambiando el ancho de una de sus imágenes en su página web, como se muestra en
    el video Agregar imágenes y vínculos.

    ¡Intentalo! Crear listas y tablas


    Una vez más, consulte nuestra página de documentación para recordar los diferentes tipos de etiquetas HTML: http://www.dukelearntoprogram.com/co
    .

    Crear listas
    Agrega una lista ordenada a tu página "Mis intereses" . Por ejemplo, podría clasificar sus cinco
    comidas favoritas, libros, películas, etc.

    También agregue una lista desordenada . Por ejemplo, enumere varios lugares que le gustaría visitar, trabajos que le gustaría tener,

    personas que le gustaría conocer, etc.

    Hacer una mesa

    A continuación, cree una tabla, completa con al menos dos filas, incluida una fila de encabezado . Utilizar el

    celdas de la tabla para organizar texto, imágenes o enlaces para su página web.

    ¡Desafío extra!
    Intente anidar una lista dentro de otra lista, o agregue una lista dentro de una (o varias) de las celdas de su tabla.

    ¡Intentalo! Diseñe su página web con CSS [después del video 2.2.20]

    Abra su página web "Mis intereses" en CodePen y comience a diseñar su página con el editor de CSS.

    1. Use CSS para diseñar al menos 12 elementos HTML ( párrafos, títulos, imágenes, etc.).
    2. Agregue ID o clases a al menos 23 elementos HTML.
    3. Utilice CSS para diseñar sus ID o clases.

    Tenga en cuenta que puede colocar muchos elementos HTML dentro de las etiquetas <div> </div> y luego usar CSS para diseñar todo entre las

    etiquetas div de la misma manera, por ejemplo: usando el mismo color de fondo o tamaño de fuente.

    6
    ¿Necesitas ayuda?

    ● Consulte nuestra página de documentación para un ejemplo básico de estilo CSS


    propiedades: http://www.dukelearntoprogram.com/course1/doc/#css .
    ● Mira este ejemplo de página "Mis intereses" : http://codepen.io/quentinre/pen/pEoqBK .
    Este ejemplo utiliza algunas propiedades de CSS que no figuran en DukeLearnToProgram.com.
    ● Explore las escuelas W3 ( http://www.w3schools.com/css/default.asp ) para comprender mejor cómo funcionan estas
    propiedades y aprender más CSS.
    ● Aquí hay 140 nombres de colores que puede usar para colorear su página:

    http://www.w3schools.com/cssref/css_colors.asp .
    ● ¡Manténgalo simple y concéntrese en los conceptos básicos que aprendió en los videos!

    ¡Intentalo! Personaliza los colores de tu página web

    Siéntase libre de personalizar mejor los colores de su página web "Mis intereses" utilizando un selector de color (como este:

    https://developer.mozilla.org/enUS/docs/Web/CSS/CSS_Colors/Color_picker_tool ) y copiando los seis dígitos hexadecimales


    de un color para usar en su página web.

    [Mensaje de debate] Comparta su página web "Mis intereses"


    Deje que sus compañeros de clase aprendan un poco sobre usted compartiendo su página web "Mis intereses" aquí en este hilo del
    foro de discusión.

    Además, después de compartir un enlace a su página, siéntase libre de explorar las páginas de sus compañeros, aprender sobre sus
    intereses y obtener otras ideas sobre cómo estructurar y diseñar una página web con HTML y CSS.

    También podría gustarte