Generalidades
Durante este taller, usted va a construir su propia página web usando HTML y CSS. HTML es como el contorno, elementos, y estructura. CSS es el estilo, organización y colores. Vamos a caminar a través de cada paso del camino, pregunte si usted tiene preguntas en cualquier momento. Consulte el sitio de ejemplo que va a crear: durhamka.github.io
Introducción
Al escribir código, recuerde que usted tiene que ser muy preciso. Los errores ortográficos o espacios adicionales pueden estropear tu trabajo, así que presta atención a los pequeños detalles! Copiar y pegar siempre que pueda.
Divida en grupos, y abre tu editor de texto. Usted tendrá diferentes editores de texto en función de lo que el ordenador que está utilizando. Su instructor le ayudará a encontrar su editor y abra. Un editor de texto es donde se le escribiendo todo el código que se va a escribir hoy! Así que cuando se le pide que copie y pegue durante este taller, que va a guardar todo ese código en tu editor de texto.
A continuación, vamos a abrir el navegador que va a utilizar en la actualidad. Dependiendo de qué computadora que está utilizando va a determinar qué aplicación que va a utilizar. Será bien sea Chrome, Firefox, Safari o Internet Explorer. Un navegador es donde se va a ver su trabajo como de realizar cambios en tu editor de texto.
Crear sus archivos
Vamos a crear un directorio que contendrá tanto el código HTML y el archivo CSS.
Si está usando un Mac, abra una aplicación llamada 'Buscador' o 'Finder'. Siga estas instrucciones: Haga clic en "Escritorio" en la lista de la izquierda. En la esquina superior izquierda, haga clic en "Archivo", luego "Nueva carpeta". Crear una nueva carpeta y el nombre de 'personal_site'. Pulse Aceptar para guardar la nueva carpeta.
Si está utilizando un PC, cree una nueva carpeta y el nombre de 'personal_site'. Pregunte a un instructor si usted tiene alguna dificultad para hacer esto.
En su editor de texto, haga clic en "Archivo" en la esquina superior izquierda y seleccione 'New File'. Para nombrar el archivo, haga clic en "Archivo", luego haga clic en "Guardar". Guarde este archivo en la carpeta de 'personal_site'. Llame a este archivo 'index.html'. Clic en Guardar'. Esta será su archivo en el que todo el HTML de su sitio vivirán. Su editor de texto, dependiendo de lo que usted está usando, puede trabajar de manera diferente a este. Si es así, pida a un instructor para obtener ayuda.
Ahora, cree una carpeta de imágenes en el interior de la carpeta 'personal_site. Aquí es donde se almacenarán todas las imágenes de su sitio web. Muestre su instructor de la estructura de carpetas para asegurarse de que es correcta. A continuación, pasar a la siguiente sección!
Configuración de su página HTML
Vamos a empezar por construir el esqueleto de nuestra página web con HTML. Esto significa que no habrá ningún estilo, pero sólo la estructura y los elementos. HTML significa Hyper Text Markup Language. Observe la estructura de lo que está pegando. En la parte superior de la página, le estamos diciendo a la computadora qué tipo de documento que estamos creando; un documento HTML. Nótese que estamos creando tanto "cabeza" y los elementos "cuerpo" para decirle al navegador que tenemos un encabezado y un cuerpo. Vamos a seguir para aprender más acerca de los elementos durante el ejercicio. Elementos dicen al navegador lo que queremos, si se trata de un texto más pequeño, el texto más grande o una parte específica de la página siguiente:
En el archivo index.html que ya ha creado en el editor de texto, copie y pegue el:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Añadir tú titulo agui</title>
<link href='https://fonts.googleapis.com/css?family=Muli:400,300italic,300' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Alex+Brush' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="index.css">
<link rel="shortcut icon" href="images/logo@2x.png">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
LLENAR CONTENIDO AQUI
</body>
</html>
Recuerde, no lo hagas eliminar cualquiera de este código, es lo que hace que su página web aparezca correctamente en el navegador, la conexión de la guía de estilo, y la vinculación a las fuentes.
Escriba en su propio nombre donde dice "Añadir su título de la página aquí. Además, asegúrese de guardar el archivo después de editarlo pulsando 'comando + s'. No guarda automáticamente.
Edite la etiqueta la página "título" para que coincida con lo que usted quiere llamar a su sitio web.
Ahora vamos a ver lo que acabas de hacer. Abra el navegador (Chrome, Safari o Firefox). Haga clic en "archivo" en la esquina superior izquierda. Haga clic en "Abrir archivo" y seleccione el archivo index.html de la carpeta 'personal_site' en el escritorio. Usted debe ver una página en blanco. Si usted no ve una página en blanco, podría ser simplemente porque está utilizando un editor de texto diferente. Mantenga esta página abierta, vamos a utilizar esto a lo largo del taller para ver su sitio web como realiza cambios.
Navegación
Ahora vamos a empezar a añadir HTML para nuestra navegación. Esto irá en la parte superior de la página web. Navegación permite a los espectadores de su sitio para moverse fácilmente de una sección a otra. Vamos a construir la funcionalidad para que más adelante, pero sólo quiero añadir la estructura básica.
Copie y pegue el siguiente código en texto Sublime. Usted pega este código en entre el '<div id="body">' and cerrando '<div>' etiqueta. Usted debe reemplazar el texto que dice "LLENAR CONTENIDO AQUÍ" Deje siempre la apertura y etiquetas de cierre en la parte superior e inferior de su código. (div contenedor, cuerpo de la etiqueta y la etiqueta html).
<div id="container">
<nav>
<a href="#resumen">Resumen</a>
<a href="#fotos">Fotos</a>
<a href="#contacto">Contacto</a>
</nav>
</div>
La palabra clave 'href' y 'a' elemento crea un 'link' que alguien puede hacer clic en. Vamos a hacer que estos enlaces funcionen más tarde. Tómese un momento para jugar con esto. Cambie las palabras como 'Resumen' a otra cosa. Guarde el archivo en su editor de texto, y refrescar el navegador Chrome. Observe cómo cambia a lo que usted ha escrito. Pregunte a su instructor si tiene alguna pregunta.
Su código HTML, hasta el momento, debería tener este:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tú nombre</title>
<link href='https://fonts.googleapis.com/css?family=Muli:400,300italic,300' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Alex+Brush' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="index.css">
<link rel="shortcut icon" href="images/logo@2x.png">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="container">
<nav>
<a href="#resumen">Resumen</a>
<a href="#fotos">Fotos</a>
<a href="#contacto">Contacto</a>
</nav>
</div>
</body>
</html>
Sección Cabecera
Este será el punto focal principal de su sitio. Vamos a añadir una imagen y estilos más adelante, pero por ahora, sólo estamos construyendo el esquema. Copia y pega el siguiente código justo debajo de la etiqueta de navegación de cierre (</nav>). Si estás confuso, su instructor puede mostrar.
<header>
<div id="image-container"></div>
<h1>Tú nombre</h1>
<div class="divider"></div>
<h2>Escribe algo sobre tú.</h2>
</header>
Asegúrese de cambiar el texto para mostrar su nombre y su subtitulo!
Sección de Resumen
Ahora, vamos a añadir nuestra primera sección, la sección de resumen. Copia y pega el siguiente código en el archivo html.
<section id="resumen" class="resumen">
<h1>Mi Experiencia</h1>
<h3>Trabajo</h3>
<p>Descripcion de trabajo</p>
<p class="detail">Datos de trabajar</p>
<div id="line-break"> </div>
<h3>Trabajo</h3>
<p>Descripcion de trabajo</p>
<p class="detail">Datos de trabajar</p>
<div id="line-break"> </div>
<h3>Otra trabajo</h3>
<p>Descripcion de trabajo</p>
<p class="detail">Datos de trabajar</p>
<div id="line-break"> </div>
<h3> Actividades, voluntario, otras cosas </h3>
<p>Description.</p>
<p class="detail">Datos de trabajar</p>
</section>
Observe cómo esta sección tiene un "id". El "id" nos permitirá enlazar a esta parte de la página de la sección de navegación, al hacer clic en el enlace. Siéntase libre de agregar y cambiar cualquier información que desee. Para desafiarse a sí mismo, trate de añadir otra secton bajo 'mi experiencia' que habla de sus metas futuras. Recuerde a actualizar el navegador para ver crecer el sitio.
Su código hasta este punto, debería tener este:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tú nombre</title>
<link href='https://fonts.googleapis.com/css?family=Muli:400,300italic,300' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Alex+Brush' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="index.css">
<link rel="shortcut icon" href="images/logo@2x.png">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="container">
<nav>
<a href="#resumen">Resumen</a>
<a href="#fotos">Fotos</a>
<a href="#contacto">Contacto</a>
</nav>
<header>
<div id="image-container"></div>
<h1>Tú nombre></h1>
<div class="divider"></div>
<h2>Personal Description</h2>
</header>
<section id="resumen" class="resumen">
<h1>Mi Experiencia</h1>
<h3>Trabajo</h3>
<p>Descripcion de trabajo</p>
<p class="detail">Datos de trabajar</p>
<div id="line-break"> </div>
<h3>Trabajo</h3>
<p>Descripcion de trabajo</p>
<p class="detail">Datos de trabajar</p>
<div id="line-break"> </div>
<h3>Otra trabajo</h3>
<p>Descripcion de trabajo</p>
<p class="detail">Datos de trabajar</p>
<div id="line-break"> </div>
<h3> Actividades, voluntario, otras cosas </h3>
<p>Description.</p>
<p class="detail">Time Period</p>
</section>
</div>
</body>
</html>
Fotos Sección
Ahora vamos a pasar a sus fotos. Pero antes de escribir más código, elege ocho fotos que ha tomado o que usted representa que usted le gustaría tener en su sitio.
Guarde cada una de las imágenes en la carpeta 'images' que ha creado anteriormente. Si usted no tiene imágenes fácilmente disponible, usted puede mantener a los que ya tenemos. Cambia el nombre de cada foto a algo que representa su imagen. Asegúrese de que los nombres de archivo no tienen ningún espacio. Por ejemplo, usted podría nombrar un archivo 'my_dog_is_cool.jpg'.
Copie y pegue el siguiente código en el archivo html bajo la etiqueta de cierre de la sección Resumen - </section>.
Pegue el nombre de cada una de sus imágenes en el archivo html donde dice 'your_image_name' a continuación.
<section id="fotos" class="fotos">
<h1>Mis Fotos</h1>
<div class="foto_container">
<img src="images/your_image_name.jpg" alt="image_name">
<img src="images/your_image_name.jpg" alt="image_name">
<img src="images/your_image_name.jpg" alt="image_name">
<img src="images/your_image_name.jpg" alt="image_name">
<img src="images/your_image_name.jpg" alt="image_name">
<img src="images/your_image_name.jpg" alt="image_name">
<img src="images/your_image_name.jpg" alt="image_name">
<img src="images/your_image_name.jpg" alt="image_name">
</div>
</section>
Observe la etiqueta 'img'. Eso le dice al navegador que se le añade una imagen aquí. El nombre 'alt' es lo que aparece si la imagen pasa de no cargar. Actualice su navegador y observe todas sus imágenes aparecen!
Contacto Sección
Estamos en nuestra sección final! Hay cuatro imágenes en el escritorio de su ordenador que se utilizará para las imágenes de contacto. Si no los tiene, estamos pasando alrededor de una unidad de disco USB y su instructor podemos ayudarle a obtener de ellos fuera de la unidad de disco USB y en su escritorio. Tome las cuatro imágenes y colocarlas en la carpeta 'images'.
Copie y pegue el siguiente código debajo de las imágenes </section>.
<footer id="contacto">
<h1>Contacto</h1>
<a href="https://twitter.com/your_twitter_handle"><img src="images/twitter.png"></a>
<a href="https://facebook.com/your_facebook_name"><img src="images/facebook.png"></a>
<a href="https://linkedin.com/in/your_linkedin_name"><img src="images/linkedin.png"></a>
<a href="mailto:your_email_address"><img src="images/mail.png"></a>
</footer>
<div id="kubmo_info">
<a href="http://kubmo.github.io/" target="_blank" <p>Like this site? Build your own with the Kubmo Guides!</p> </a>
</div>
Observe la etiqueta 'href' de nuevo. Esto significa que estas imágenes enlazan a sus perfiles sociales reales en línea. Puesto en los vínculos reales a sus sitios de medios sociales, por lo que la gente puede ponerse en contacto con usted! Actualice la ventana del navegador y asegúrese de que al hacer clic sobre las imágenes, se vinculan a sus perfiles sociales correctamente en una nueva página. Si no, pregunte a su instructor.
Su código HTML debería tener este aspecto, en este momento!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tú nombre</title>
<link href='https://fonts.googleapis.com/css?family=Muli:400,300italic,300' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Alex+Brush' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="index.css">
<link rel="shortcut icon" href="images/logo@2x.png">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="container">
<nav>
<a href="#resumen">Resumen</a>
<a href="#fotos">Fotos</a>
<a href="#contacto">Contacto</a>
</nav>
<header>
<div id="image-container"></div>
<h1>Tú nombre></h1>
<div class="divider"></div>
<h2>Personal Description</h2>
</header>
<section id="resumen" class="resumen">
<h1>Mi Experiencia</h1>
<h3>Trabajo</h3>
<p>Descripcion de trabajo</p>
<p class="detail">Datos de trabajar</p>
<div id="line-break"> </div>
<h3>Trabajo</h3>
<p>Descripcion de trabajo</p>
<p class="detail">Datos de trabajar</p>
<div id="line-break"> </div>
<h3>Otra trabajo</h3>
<p>Descripcion de trabajo</p>
<p class="detail">Datos de trabajar</p>
<div id="line-break"> </div>
<h3> Actividades, voluntario, otras cosas </h3>
<p>Description.</p>
<p class="detail">Time Period</p>
</section>
<section id="fotos" class="fotos">
<h1>Mis Fotos</h1>
<div class="foto_container">
<img src="images/your_image_name.jpg" alt="image_name">
<img src="images/your_image_name.jpg" alt="image_name">
<img src="images/your_image_name.jpg" alt="image_name">
<img src="images/your_image_name.jpg" alt="image_name">
<img src="images/your_image_name.jpg" alt="image_name">
<img src="images/your_image_name.jpg" alt="image_name">
<img src="images/your_image_name.jpg" alt="image_name">
<img src="images/your_image_name.jpg" alt="image_name">
</div>
</section>
<footer id="contacto">
<h1>Contacto</h1>
<a href="https://twitter.com/your_twitter_handle"><img src="images/twitter.png"></a>
<a href="https://facebook.com/your_facebook_name"><img src="images/facebook.png"></a>
<a href="https://linkedin.com/in/your_linkedin_name"><img src="images/linkedin.png"></a>
<a href="mailto:your_email_address"><img src="images/mail.png"></a>
</footer>
<div id="kubmo_info">
<a href="http://kubmo.github.io/" target="_blank" <p>Like this site? Build your own with the Kubmo Guides!</p> </a>
</div>
</div>
</body>
</html>
Estila la página!
¡Felicidades! Usted tiene el esquema básico para su sitio web. ¿Pero, lo mira un poco desorganizado en el navegador? Ahora, vamos a agregar todos los estilos para que sea bonita. Tenemos que crear otro archivo, nuestro archivo CSS. Así como lo hizo al principio, crea un nuevo archivo en la carpeta de 'personal_site', y llamar al archivo 'index.css' en su código.
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
font-family: 'Muli', sans-serif;
font-weight: lighter;
padding: 0;
margin: 0;
background-color: #F5F5F5;
}
h1 {
font-size: 30px;
margin: 0;
font-weight: normal;
text-align: center;
padding-bottom: 60px;
color: #400160;
}
h2 {
font-size: 25px;
font-weight: lighter;
text-align: center;
}
header h1 {
font-size: 75px;
font-family: 'Alex Brush', cursive;
border-bottom: none;
color: #ee1289;
}
header,
section,
footer {
padding: 60px 120px
}
.loves,
footer {
text-align: center;
}
p {
font-size: 18px;
line-height: 1.5;
color: #848484;
padding-bottom: 30px;
}
Actualice la página y observe lo que sucede. Nótese que estamos apuntando cosas en nuestra estructura HTML. Por ejemplo, el 'h1' está apuntando a nuestra cabecera. Juega un poco con el cambio de las cosas, al igual que los tamaños de fuente. Actualice el navegador y observe cómo cambian las cosas! Pregunte a su instructor si surge alguna pregunta.
Antes de pasar a labrar la sección de encabezado, elegir una imagen que será la imagen de fondo. Asegúrese de que sea una imagen grande! Guarde la imagen como 'hero.jpg' en la carpeta de imágenes.
Una vez que haya hecho eso, copia y pega el siguiente código debajo, directamente después de la CSS existente.
header {
margin-top: 70px;
position: relative;
display: block;
min-height: 500px;
overflow: hidden;
text-align: center;
}
#image-container {
position: absolute;
top: -10px;
left: 0px;
bottom: -10px;
right: 0px;
background: url(images/your_image_name_here.jpg) no-repeat center center fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
filter: blur(5px);
-webkit-filter: blur(6px) saturate(180%);
-moz-filter: blur(6px) saturate(180%);
-o-filter: blur(6px) saturate(180%);
-ms-filter: blur(6px) saturate(180%);
filter: blur(6px) saturate(180%);
}
header h1 {
position: absolute;
top: 140px;
font-size: 118px;
color: #ffffff;
left: 20px;
right: 20px;
}
.divider {
width: 100px;
height: 4px;
top: 220px;
background: #FFFFFF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
position: relative;
left: 46%;
}
header h2 {
position: absolute;
top: 290px;
font-size: 30px;
color: #ffffff;
left: 20px;
right: 20px;
padding-top: 4 0px;
}
Cambie el nombre de su imagen en el "image-container" para será el nombre del archivo de imagen que acaba de guardar (asegúrate de que escribe el nombre del archivo correctamente! Probablemente lo nombró hero.jpg). Guarde el archivo y actualizar el navegador. Mire a su cabecera la imagen de fondo! Si no está apareciendo, hable con su instructor.
A continuación, copie el siguiente código en la siguiente línea en su archivo css.
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 70px;
text-align: center;
z-index: 1;
background-color: white;
border-top: thick solid #AA00FF;
-webkit-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.2); /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.2); /* Firefox 3.5 - 3.6 */
box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.2);
}
nav a {
display: inline-block; /* changes links from default inline element to add padding properly */
text-decoration: none; /* removes underline */
margin: -5px 20px 20px 20px; /* adds space around each link */
color: #808080;
font-size: 20px;
font-style: normal;
font-weight: lighter;
padding: 25px;
}
nav a:hover {
background-color:#AA00FF;
color: #FFFFFF;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
Note como cuando se pasa sobre el menú de navegación en la parte superior. Ahora debería estar cambiando de color! Esto se hace con el. 'Nav a: hover', la última cosa que pegó.
Termina tu estilo de escritorio
Copia y pegar el CSS restante en la parte inferior de su archivo css, para terminar su css escritorio. Puedes jugar mas con el código, y hacer cambios para personalizar su sitio. Si algo no se ve bien o si desea la ayuda que personaliza, solo pregunte a su instructor. También, usted debería ser capaz de hacer clic en cada vínculo de navegación y hacer que le llevará a la sección correcta en su sitio!
.resumen {
overflow: hidden;
}
.resumen h1 {
font-weight: 600;
border-bottom: 1.5px solid #ccc;
}
.resumen h3 {
padding-top: 30px;
color: #400160;
font-weight: 600;
}
.resumen p {
color: #848484;
font-weight: 100;
}
.detail {
margin-top: -30px;
font-style: italic;
opacity: .5;
}
#line-break {
width: 100px;
height: 1px;
background: #ccc;
}
.fotos {
margin-top: -100px;
}
.fotos h1 {
border-top: 1.5px solid #ccc;
padding-top: 60px;
}
.fotos img {
width: 286px;
}
footer {
margin-top: -100px;
}
footer h1 {
margin-top: 30px;
border-bottom: 1.5px solid #ccc;
}
footer img {
width: 50px;
margin: 60px 30px 0px 30px;
}
/* BOTTOM BAR - kubmo info
-----------------------------------------*/
#kubmo_info a {
text-decoration: none;
font-weight: 600;
color: #FFFFFF;
}
#kubmo_info p {
font-weight: 600;
color: #FFFFFF;
}
#kubmo_info {
background-color: #AA00FF;
width: 100%;
text-align: center;
padding-top: 32px;
height: 82px;
}
#kubmo_info a:hover {
color: #400160;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
Hacer su sitio Responsive
Ahora vamos a hacerlo de modo que la gente pueda ver su sitio web en un teléfono móvil o tablet. Esto se hace usando 'media queries' - verá el texto que dice algo como '@media only screen and (max-width: 1400px)'.
Copia y pegar este código en la parte inferior de su archivo CSS, para que cuando alguien en un teléfono móvil, se ve muy bien!
/* MOBILE - responsive design
-----------------------------------------*/
@media only screen and (max-width: 1400px) {
.fotos img {
width: 260px;
}
}
@media only screen and (max-width: 1300px) {
.fotos img {
width: 320px;
}
}
@media only screen and (max-width: 1000px) {
header,
section,
footer {
padding: 60px;
}
h1 {
font-size: 30px;
}
h2 {
font-size: 18px;
}
header h2 {
margin-top: 20px;
}
header h1 {
font-size: 100px;
margin-top: 0px;
}
.divider {
top:200px;
left: 43%;
}
nav a {
margin: -5px 5px 5px 5px ; /* adds space around each link */
font-size: 18px;
padding: 25px;
}
}
@media only screen and (max-width: 800px) {
header h1 {
font-size: 100px;
margin-top: -60px;
}
header h2 {
margin-top: 80px;
}
.divider {
top:280px;
left: 43%;
}
}
@media only screen and (max-width: 600px) {
header,
section,
footer {
padding: 40px;
}
h1 {
font-size: 30px;
padding-top: 30px;
}
header h2 {
margin-top: 80px;
}
header h1 {
font-size: 60px;
margin-top: -30px;
}
header {
margin-top: 40px;
}
.divider {
top:260px;
left: 36%;
}
}
Woo hoo! Su sitio debe mirar cómo usted quisiera que! Usted acaba de construir su primer sitio web. ¡Qué gran logro!
Presenta su sitio
Vamos a alojar su sitio en algo que se llama Github. Si tenemos bastante bueno de internet, lo haremos juntos. Si no, lo haremos para usted cuando tenemos una mejor conexión y te enviaremos un correo electrónico con la URL de su sitio. Entonces usted será capaz de ver desde cualquier ventana del navegador, y puedes compartirlo con cualquier persona.
Si no quieres usar Github, podemos empujar su sitio para ti. Pones tu correo electronico en nuestro documento, y luego te enviaremos tú sitio!
Crear una cuenta de Github
Con el fin de alojar su sitio en Github, es necesario crear una cuenta. Es gratis. En el navegador, vaya a 'www.github.com'. En la esquina superior derecha, haga clic en "Registrarse". Escriba un nombre de usuario, dirección de correo electrónico y la contraseña y haga clic en "Crear una cuenta". Si necesita ayuda de traducción, pregunte a su instructor.
Creación de una página de Github
Inicie sesión en la página principal. En la esquina superior derecha hay un signo '+'. Haga clic en eso y seleccione la primera opción 'Nuevo repositorio. En el nombre del repositorio "tipo caja" 'your_username'.github.io ". Asegúrese de que usted escriba su nombre de usuario que acaba de crear su cuenta con. Y a continuación, haga clic en el botón verde, 'Crear repositorio'.
El uso de un Github GUI
Abra la aplicación Github en su ordenador. Si el equipo no lo tiene, tenemos un USB que lo tiene en él lo que aún puede descargarlo. Vamos a utilizar esta aplicación para empujar su trabajo a la página de Github. Entonces, nadie será capaz de ver su sitio personal. El uso de la aplicación Github es complicado, así que vamos a saber a su instructor cuando se llega a este punto. Ella puede ayudarle a clonar el repositorio que creó en el paso anterior. Usted puede ver el proyecto que desea clonar pulsando el botón "+" en la esquina superior izquierda. Usted, a continuación, agregue todos los archivos y pulsa el botón 'comprometerse' que empujará todo el código a su página.
El Producto Terminado
En su navegador, vaya a http://your_username.github.io. Usted debe ver su sitio terminado. Usted puede visitar este URL en cualquier momento desde cualquier ordenador, siempre y cuando tenga conexión a Internet. Comparte con tu familia, amigos y en los redes sociales. Si el sitio no aparece, deje saber a su instructor y pueden ayudarle a depurar.
Si no quieres usar Github, podemos empujar su sitio para ti. Pones tu correo electronico en nuestro documento, y luego te enviaremos tú sitio!