Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Documento 1 PDF
Documento 1 PDF
Universidad de Duke
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".
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!
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
página web de manera diferente (por ejemplo, tener una fuente de texto, color o tamaño diferente, o un color de fondo diferente
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
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/
3
¡Nos vemos en el próximo video!
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.
http://www.dukelearntoprogram.com/course1/doc/#basichtml .
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ñ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:
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.
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,
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?
http://www.w3schools.com/cssref/css_colors.asp .
● ¡Manténgalo simple y concéntrese en los conceptos básicos que aprendió en los videos!
Siéntase libre de personalizar mejor los colores de su página web "Mis intereses" utilizando un selector de color (como este:
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.