-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathReadme.md.orig
1727 lines (1104 loc) · 57.6 KB
/
Readme.md.orig
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<section class="cover">
# Amor por el código
</section>
<section>
# Bienvenido
Amor por el código es una actividad que nace desde las mentes creativas y vanguardistas de academia desafío.
El objetivo, ~~es enamorarse~~ es utilizar esta tarde, para conocer gente nueva, divertirnos y aprender a hacer una página web.
<<<<<<< HEAD
=======
>>>>>>> 0dd05057d8ed0f00fe015091b3f0d1ce6d35be96
Esta guía la haremos en conjunto, realizando actividades que utilizan la metodología de hazlo tu mismo, mientras aprendes la teoría desde la práctica.
Primero realizaremos una página web estática utilizando HMTL y CSS. Tranquilo si no tienes ningún conocimiento previo, no los necesitas, te guiaremos en el proceso.
Trataremos de ir explicando cada término utilizado para que tengas un contexto de lo que estamos haciendo, y a tu disposición estarán los mentores y guías para ayudarte cuando lo necesites.
## ¿Qué se necesita para este taller?
Para el evento solo necesitas que tu computador tenga instalado, un navegador y un editor de texto.
Y de tu parte muchas ganas de participar y aprender.
Cómo navegador puedes ocupar alguno como:
- Firefox
- Safari
- Chrome
- Opera
- Edge
Como editor de texto te recomendamos:
- [Atom](https://atom.io/).
***Si ya tienes todo lo necesario, Aprendamos primero que es una página web.***
## ¿Qué es una página web?
<<<<<<< HEAD
Si buscamos en google, posiblemente encontremos desde respuestas muy complejas a que la respuesta esta en nuestro corazón, así que definiremos de forma muy simple algunos términos.
=======
Si buscamos en google, posiblemente encontremos desde respuestas muy complejas a que la respuesta está en nuestro corazón, así que definiremos de forma muy simple algunos términos.
>>>>>>> 0dd05057d8ed0f00fe015091b3f0d1ce6d35be96
***WebPage (página web)*** es un documento que puede ser visto en la pantalla a través de un navegador como Firefox, Google Chrome, Internet Explorer. Solo es un documento.
***Un Website(sitio Web)*** es una colección de páginas(documentos), agrupadas y conectadas, generalmente de un mismo tema o tópico.
***Web Server(servidor Web)*** es un computador que almacena websites en internet.
***CSS(Cascading Stylesheets)*** significa hojas de estilo en cascada y es un lenguaje para definir estilos a las etiquetas HTML. CSS también puede definir como los elementos pueden ser mostrados.
***JS*** JavaScript es un lenguaje de programación muy utilizado para hacer páginas webs.
***¿ muy rápido ? No lo creo, Bienvenido@ a la web.***
## Creando nuestra primera página web:
<<<<<<< HEAD
Vamos a crear un proyecto totalmente desde cero, sigue los pasos y si tienes dudas, acércate a algún mentor, guía de la actividad, ~~o aquella persona que te llamo la atención~~, estamos acá para ayudarte.
=======
Vamos a crear un proyecto totalmente desde cero, sigue los pasos y si tienes dudas, acércate a algún mentor, guía de la actividad, ~~o aquella persona que te llamo la atención~~, estamos acá para ayudarte.
>>>>>>> 0dd05057d8ed0f00fe015091b3f0d1ce6d35be96
### Primer paso :
Vamos a crear una carpeta nueva en el escritorio. Le puedes llamar como tu quieras, como ejemplo "proyecto web".
### Segundo paso:
Luego abrimos la carpeta "proyecto web" en Atom (tú editor de texto).
- Puede ser arrastrando la carpeta hacia el editor de texto</li>
- O abriéndola desde el editor de texto.</li>
### Tercer paso:
<<<<<<< HEAD
Ahora crearemos un archivo nuevo llamado index.html ( debemos presionar sobre la carpeta del proyecto el botón secundario y utilizar la opción "New File".
=======
Ahora crearemos un archivo nuevo llamado index.html ( debemos presionar sobre la carpeta del proyecto el botón secundario y utilizar la opción "New File".
>>>>>>> 0dd05057d8ed0f00fe015091b3f0d1ce6d35be96
Luego :
Llamaremos a nuestro primer archivo
~~~
index.html
~~~
Presionamos enter y el archivo quedó guardado como index.html
### Cuarto Paso:
Ahora escribiremos, en nuestro archivo:
~~~html
Feliz día del amor, Hola mi amor, o lo que tu quieras !!!
~~~
Luego guardamos (grabamos). Para hacerlo puedes ir a la opción File / save, pero te recomiendo que utilizes el atajo del teclado.
***Ctrl + s (Windows, Linux) o cmd + s (mac).***
### Quinto paso
<<<<<<< HEAD
=======
Ahora podemos abrir este archivo con nuestro navegador, vamos a la carpeta donde esta alojado y ábrelo.
>>>>>>> 0dd05057d8ed0f00fe015091b3f0d1ce6d35be96
Al abrirlo en el navegador te debería aparecer algo como esto:
<<<<<<< HEAD
=======
>>>>>>> 0dd05057d8ed0f00fe015091b3f0d1ce6d35be96
***Felicidades!! Ya estás escribiendo tú primera página web!!!***
### Recapitulemos
Fueron solo 5 pasos, mucho mas fácil que hacer una piscola, ¿cierto?.
Respondamos algunas preguntas.
***¿Por qué llamar al archivo de inicio como index?***
Porque es una convención, se subentiende que es el archivo índice que inicia una página web.
***¿Por qué la extension del archivo es .html?***
El que sea .html dice que es un archivo que se interpretará como HTML, es decir el navegador abrirá y leerá su contenido, En la siguiente etapa vamos a conocer mas de HTML.
Este simple ejercicio nos enseñó algunas cosas interesantes, mira a tu compañero y ~~ámense en secreto~~ coméntenlo.
<<<<<<< HEAD
#Capítulo 1
=======
## ¿Qué es HTML?
>>>>>>> 0dd05057d8ed0f00fe015091b3f0d1ce6d35be96
## ¿Qué es HTML?
<<<<<<< HEAD
HTML significa "HyperText Markup Language" - en español, **Lenguaje de Marcas** de HyperTexto.
=======
HTML significa "HyperText Markup Language" - en español, **Lenguaje de Marcas** de Hypertexto.
>>>>>>> 0dd05057d8ed0f00fe015091b3f0d1ce6d35be96
**HyperText** significa que es un tipo de texto que soporta hipervínculos entre páginas.
**Marcado** significa que hemos tomado un documento y lo marca con código para decirte cómo interpretar la página (en este caso, un navegador).
HTML es un lenguaje de **marcas**, cada una comenzando con `<` y terminando con `>`. Estas etiquetas definen **propiedades**, la **importancia** y el **significado semántico** del contenido que envuelven.
Entonces una página web es un archivo que contiene un conjunto de marcas ó etiquetas y el navegador lee estos archivos HTML y con eso muestra las páginas.
# ~~Conozcamonos~~ Trabajemos.
Reunanse en parejas, si, no sean timid@, estamos acá para conocer gente y aprender.
Una vez reunidos, vamos a construir un sitio con el perfil de tu compañer@. Vamos a añadir alguna foto, por lo cual cada uno deberá facilitar sacarse una o bajarla de la red social.
<<<<<<< HEAD
Ademas el sitio debe contener la información de gustos de cada uno, si somos cursis podemos preguntar hasta el signo zodiacal. Lo importante es reunir información para que nuestra página sea lo mas real posible.
=======
Ademas el sitio debe contener la información de gustos de cada uno, si somos cursis podemos preguntar hasta el signo zodiacal. Lo importante es reunir información para que nuestra página sea real y la información lo mas real posible.
>>>>>>> 0dd05057d8ed0f00fe015091b3f0d1ce6d35be96
Si viniste con tu pareja y todos estos datos ya son conocidos, Celebremos el amor y creemos una oda a la persona que tenemos a nuestro lado, Una página con su descripciones y gustos, o simplemente porque la aman tanto, o sus mas oscuros deseos etc... seamos creativos.
Si por algún motivo no alcanzamos a tener compañer@, no te preocupes, crea tu propio perfil, demostrando que eres mas cool y que amas el código y a ti, mas que el whiskey al hielo.
## Primera parte
### Estructura de HTML
Un archivo HTML para poder ser interpretado correctamente deber tener una estructura. La estructura básica consiste en una **cabeza** (*head*) y un **cuerpo** (*body*), la cabeza contiene toda la información que es para el **navegador**, el cuerpo de la página contiene toda la información que es para el **usuario**. Dentro de las etiquetas HTML se encuentra todo el contenido de la página, y dentro de ellas están los dos bloques previamente mencionados.
La estructura de una página en HTML es la siguiente:
~~~html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<!-- Aquí va el contenido de la página web -->
</body>
</html>
~~~
El `doctype` (o tipo de documento) es la primera etiqueta que leeremos y le indica al navegador como debe interpretar el resto del documento. En el ejemplo veremos que el doctype especificado es de HTML5, el cuál es el estándar de actual.
La etiqueta `<html>` especifica que desde ese punto en adelante todo lo que venga deberá ser interpretado como HTML.
En HTML la etiqueta `<head>` Contendrá información variada, desde dónde encontrar las hojas de estilo o los iconos, hasta cuál es el título del sitio o sencillamente cómo debe manejar la página en el caso de que tenga que adaptarse a distintos tamaños de pantalla.
### Actividad 01.
1- Borra el mensaje del index.html que creamos, y escribe en la primera linea
~~~html
html
~~~
Gracias a las cualidades de nuestro editor de texto, si presionamos enter luego de escribirlo, nos dará la posibilidad de autocompletar la estructura base del html.
De esta forma podemos tener la estructura de nuestra página.
<<<<<<< HEAD
=======
>>>>>>> 0dd05057d8ed0f00fe015091b3f0d1ce6d35be96
No olvides guardar la página en este punto Ctrl + s(windows, linux) o cmd + s(mac) , Atom borrará el punto azul en el nombre de nuestro archivo cuando esta guardado.
### El título
Muestra en el navegador el título de la página, se escribe entre las marcas `<title>` y `</title>` y tiene la función de ser una guía visual del contenido de la ventana o del tab del navegador.
~~~html
<!DOCTYPE html>
<html>
<head>
<title> Gal Gadot </title>
</head>
<body>
<!-- Aquí va todo lo que quieras agregar -->
</body>
</html>
~~~
>Cabe destacar que Los bookmarks ocupan el título de la página al guardarla.
>El título tiene mucho valor en el SEO(search engine optimization) de un sitio web.
### Actividad 02
Ponle título a tu página , ingresando el nombre de tú compañer@, o lo que necesites ingresar. No olvides guardar.
## Atributos y valores
En la etiqueta `<meta charset="utf-8">` vemos que hay algo nuevo que no habíamos visto en otras etiquetas, en primer lugar la marca no se cierra, y la regla es simple, si la etiqueta no tiene contenido no se cierra, y para pasarle valores adicionales se ocupan **atributos** y **valores**, donde `charset` sería el *atributo* y `utf-8` el *valor*.
## Etiquetas Básicas:
Todo lo que veremos desde ahora se debe escribir dentro de **body** *(hasta que se indique lo contrario), por ende dentro de las etiquetas* `<body>``</body>`
### Párrafos:
Si escribes en el archivo index.html :
~~~html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Gal Gadot</title>
</head>
<body>
hola a todos !!!
hola hola hola
hola !!!
</body>
</html>
~~~
Al refrescar el navegador, éste te leerá de la siguiente forma:
Si te fijas, el navegador no respeta la sintaxis de párrafos y se lee como si estuviera todo escrito en una misma línea.
Lo que pasa es que HTML es un lenguaje de marcas y para separar cada línea del texto y se pueda leer todo en varias líneas, deben de existir etiquetas de por medio.
Vamos a aprender la primera etiqueta y la más sencilla de todas: `p`.
Se abre con `<p>` y debido a que contiene información se debe cerrar con `</p>`.
Todo el contenido que se encuentre dentro de estas marcas pasa a tener la **propiedad de párrafo**.
Por ejemplo, escribamos esto en nuestro archivo index.html:
~~~html
hola a todos !!!
hola hola hola
hola !!!
<p>Gal es mi novia</p>
<p>Me encanta su personalidad</p>
<p>Le cargaría la bip</p>
~~~
*No olvidar que esto se escribe dentro de body.*
Refrescamos el navegador y quedaría algo así:
Gracias a la etiqueta `<p>` Ahora **si** respeta que sea un párrafo!!!
Puedes agregar la cantidad y largo de contenido que quieras.
En Atom si se escribe "p" (o cualquier marca) y luego tab, se autocompleta la etiqueta por si sola. Para que este truco funcione es necesario que el editor tenga identificado el tipo de archivo(html), por defecto lo detecta por la extensión original, pero se puede cambiar en la parte inferior izquierda.
### Actividad 03
Añade 3 párrafos a tu página web:
- El primero debe describir brevemente a tu compañer@.
- El segundo debe indicar la edad de tú compañer@ y cuando esta de cumpleaños.
- El tercero debe indicar cual era la expectativa de participar hoy en este evento.
No olvides guardar tu archivo y revisa tu progreso en tu navegador.
### Títulos y Subtítulos:
Una página web también tiene títulos y subtítulos, al igual que un periódico!
La marca para los titulares es `<h>` **más** un número del `1` al `6`. Siendo `<h1>` para el titular principal o con mayor importancia y `<h6>` para el subtítulo del subtítulo del subtítulo del subtítulo del subtítulo del título!
Por ejemplo escribamos en nuestro archivo index.html:
~~~html
hola a todos !!!
hola hola hola
hola !!!
<h1> Titulo 1 </h1>
<p>Gal es mi novia</p>
<p>Me encanta su personalidad</p>
<p>Le cargaría la bip</p>
<h6> Sub sub sub sub sub titulo </h6>
~~~
Refrescamos el navegador y se debería ver algo como esto:
Se puede ver que el titular `<h6>` es muy pequeño, incluso menor que los párrafos.
### Actividad 04
- Añade un Título a tu página, indicando el nombre de tu compañer@.
<<<<<<< HEAD
- Añade un subtítulo a tu página , indicando una frase que la identifique.
=======
- Añade un subtitulo a tu página , indicando una frase que la identifique.
>>>>>>> 0dd05057d8ed0f00fe015091b3f0d1ce6d35be96
- Estos títulos deben ir antes de los párrafos.
### Imágenes:
Hasta el momento solo hemos utilizado texto, así que pondremos algunas imágenes. La etiqueta para agregar imágenes es
~~~html
<img src=" " alt=" ">
~~~
Donde `src` es *source* , que en español es fuente y que es un **atributo** de la etiqueta de imagen. `alt` es otro **atributo** de la etiqueta `img`, que te permite describir(brevemente) la imagen en caso de que no se pueda cargar por escasez de internet, o en navegadores de solo texto.
Esta etiqueta no necesita cerrarse como lo hacen las anteriores.
Para agregar imágenes utilizando esa etiqueta puedes hacerlo de dos maneras:
- Directo de una URL de internet.
- Desde una imagen desde tu proyecto (desde tu computador).
###Imágenes Desde internet:
Buscas en el google la imagen que quieras, y luego haciendo click en "ver imagen" , ésta te llevará a una url terminada en .jpg o .png
Esa url debes copiarla y pegarla dentro de los `" "` del source
~~~html
<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMjUzZTJmZDItODRjYS00ZGRhLTg2NWQtOGE0YjJhNWVlMjNjXkEyXkFqcGdeQXVyMTg4NDI0NDM@._V1_UY317_CR51,0,214,317_AL_.jpg" alt="Galgadotita">
~~~
Entonces si esto lo agregamos en nuestro archivo index.html:
~~~html
hola a todos !!!
hola hola hola
hola !!!
<h1> GAL GADOT </h1>
<h2> Gal es una mujer empoderada y hermosa.</h2>
<p>Gal es preciosa</p>
<p>Me encanta su personalidad</p>
<p>Le cargaría la bip</p>
<h6> Sub sub sub sub sub titulo </h6>
<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMjUzZTJmZDItODRjYS00ZGRhLTg2NWQtOGE0YjJhNWVlMjNjXkEyXkFqcGdeQXVyMTg4NDI0NDM@._V1_UY317_CR51,0,214,317_AL_.jpg"
alt="GalGadotita">
~~~
Refrescamos el navegador:
##### Imágenes desde el computador:
Para esto debes crearte una carpeta **dentro** de tu proyecto llamada *images* y ahí ir integrando las imágenes que quieres en tu proyecto:
~~~
proyecto_web
└───index.html
images
└─── ejemplo.jpg
~~~
*Puede ser formato jpg, png, jpeg, ahí debes ver que formato es tu imagen. Importante que las imágenes estén en una carpeta que se llame images dentro de la carpeta de donde está tú proyecto*
En ese ejemplo yo estoy agregando una imagen a mi carpeta *images* con el nombre de *ejemplo* y de formato *.jpg*
Entonces para agregarla en mi web se copia la ruta de donde se encuentra mi imagen en el `src` de la siguiente manera:
~~~html
<img src="images/ejemplo.jpg" alt="ejemplo">
~~~
Donde *images* es el nombre de la carpeta donde se encuentra mi imagen + `/` + *ejemplo* (nombre de mi imagen) `.jpg`(formato)
### Actividad 05
- Añade una foto de tu compañer@ puede ser a través de la red social o una que tomes en el momento. Recuerda que si el archivo es local, debes creas la carpeta images dentro de tu proyecto. (Solicita permiso a tu compañero antes de tomar la foto).
- Añade la foto arriba del primer título.
- Guarda tu archivo y comprueba tu progreso en el navegador.
### Links:
Los links se hacen con la etiqueta `<a>`:
~~~html
<a href=" "> </a>
~~~
Esta etiqueta tiene el atributo href que es hacia adonde apunta, y contenido que muestra el texto, ya que tiene contenido esta etiqueta **si** se cierra.
Veamos un ejemplo:
~~~html
<a href="https://www.facebook.com/events/1455951704527398/">Link al evento</a>
~~~
Aquí se está transformando a la frase *Link al evento* en un hipervínculos. Y al hacerle *click* en ella , te enviará al link escrito dentro de las `" "` del `href`
Por ende lo que hace esta etiqueta es darle la **propiedad de hipervínculos** al contenido de ésta, apuntándolo al link que se encuentra en `href`
Si pongo link sin `href`, no me llevará a ninguna parte. Y si al link no le pongo texto(contenido) ,pero si `href`, no se podrá ver el link por ninguna parte y por ende no se podrá hacer nada.
Si yo quisiera que el link me abriera en una página nueva, hay que agregarle a la etiqueta el **atributo** `target="_blank"`, quedando de esta forma:
~~~html
<a href="https://www.facebook.com/events/2162321913993416/" target="_blank" > Link al evento </a>
~~~
*Importante resaltar que todos los* **atributos** (`href` , `target`, etc...) *se escriben dentro de la etiqueta `< ... >` no fuera, ya que pasaría a ser texto.*
### Actividad 06
<<<<<<< HEAD
- Añade un párrafo y en su interior agrega el enlace a alguna red social de tu compañe@. Si no tiene red social, utiliza cualquier página que le guste mucho, pone una descripción al enlace.
=======
- Añade un párrafo y en su interior agrega el enlace a alguna red social de tu compañe@. Si no tiene red social, utiliza cualquier página que le guste mucho, pone una descripción al enlace.
- Añade una nueva foto de algunos de sus pasatiempos e intenta convertirla en un hipervínculo, el link a donde nos redirige debe ser alguna página acorde a la imagen.
>>>>>>> 0dd05057d8ed0f00fe015091b3f0d1ce6d35be96
- Añade una nueva foto de algunos de sus pasatiempos e intenta convertirla en un hipervínculo, el link a donde nos redirige debe ser alguna página acorde a la imagen.
>Si necesitas ayuda, no dudes en preguntar a tu mentor.
***
## Recapitulemos
Hagamos un pequeño resumen de lo que hemos aprendido:
Si todo salió bien, Nuestro código debería verse así.
~~~html
<!DOCTYPE html>
<html>
<head>
<title>Pizza de Pepperoni</title>
<meta charset="utf-8">
</head>
<body>
<img src="http://littlecaesars.com.mx/portals/7/Images/ HSMenu_HNR_Clasica_Pep_Hisp.png" alt="DeliciosaPizza">
<h1> Pizza De Peperoni </h1>
<h2>Hermosa y Deliciosa pizza, rapida y concisa.</h3>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Ipsam consequuntur omnis minima dolorem adipisci officiis enim
optio tenetur quos aliquid, saepe, corporis dignissimos?
Harum debitis veritatis voluptas, illum iste deserunt.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quo dolorem dignissimos expedita repellendus ducimus natus
possimus, molestiae architecto, aperiam officiis, amet consequatur,
nisi. Est accusamus eum quos natus architecto modi.</p>
<p> Facebook de la Pizza <a href="https://www.facebook.com/ LittleCaesarsPIzzaSanJoaquin/" target="_blank" >aquí </a></p>
<a href="https://littlecaesars.com/en-us/"> <img src="images/pizzaLittle.jpg" alt="DeliciosaPizza"> </a>
</body>
</html>
~~~
Esto se vería así:
- Primero se está llamando una imagen desde el internet.
- Luego se pone un título `<h1>`(Titular principal).
- Luego un sub sub título `<h2>`.
- Luego viene un párrafo con bastante texto.
- Luego un párrafo que a su vez con tiene un link (`<a>`).
- luego dentro de un link se llama a una imagen que se encuentra dentro de la carpeta *images* y que se llama *pizzaLittle.jpg*. Convirtiendo la imagen en un hipervínculo.
<<<<<<< HEAD
=======
>>>>>>> 0dd05057d8ed0f00fe015091b3f0d1ce6d35be96
***Revisa si tienes algo parecido a esto, Felicidades¡ haz avanzado mucho , recuerda que si tienes dudas pide ayuda a los mentores.***
# Ordenando nuestra página.
### Listas ordenadas:
Para definir una lista de elementos ordenados ocuparemos la etiqueta `<ol>`, pero dentro de esta lista debemos definir elementos, eso lo haremos con la etiqueta `<li>`
Las listas ordenadas tienen un número o letra, esto lo modificaremos más adelante con CSS.
~~~html
<h3> Esta es una lista ordenada </h3>
<ol>
<li> Lista 1 </li>
<li> Lista 2 </li>
</ol>
~~~
### Listas desordenadas:
Las listas desordenadas tienen bullets, esto también es modificable con CSS.
Para definir una lista de elementos desordenados ocuparemos la etiqueta `<ul>`, y dentro de esta lista debemos definir elementos, eso lo haremos con la etiqueta `<li>`
~~~html
<h3> Esta es una lista desordenada </h3>
<ul>
<li> Lista 1 </li>
<li> Lista 2 </li>
</ul>
~~~
### Tablas
Es posible agregar tablas con datos ocupando la etiqueta `<table>`, dentro de una tabla debemos especificar las filas y las celdas dentro de las filas utilizando `<tr>` y `<td>` cada etiqueta tr especifica una nueva fila, y cada etiqueta td una celda.
~~~html
<table>
<tr>
<td> Celda 1</td>
<td> Celda 2</td>
</tr>
<tr>
<td> Celda 3</td>
<td> Celda 4</td>
</tr>
</table>
~~~
<table>
<tr>
<td> Celda 1</td>
<td> Celda 2</td>
</tr>
<tr>
<td> Celda 3</td>
<td> Celda 4</td>
</tr>
</table>
### Divs:
Los divs son etiquetas que permiten anidar a otras etiqueta y le damos estilo propio a la agrupación (esto lo haremos más adelante con CSS).
Envuelve varias etiquetas, y todas las etiquetas envueltas por él, están bajo la influencia del div.
~~~html
<div class="">
<h1> Titular 1 </h1>
<h2> Titular 2 </h2>
<p> Párrafo 1 </p>
</div>
~~~
Cada div puede indicar una clase especifica, esto servirá mas adelante para identificar el contenido de ese div y aplicarle estilo con CSS.
### Span:
La etiqueta span es similar a los divs pero sirve para etiquetar texto, una parte de una palabra, una palabra o más. (luego con CSS, hace más sentido, por ahora es bueno que la conozcas)
~~~html
<p> Lorem <span> Ipsum </span> </p>
~~~
## Actividad 07
Vamos a continuar nuestra página dandole un poco de orden.
- Añade un nuevo div, y en su interior añade una lista ordenada con los lugares favoritos de tu compañer@.
- Añade un otro div y agrega una tabla a tu página resaltando cualidades de tu compañer@.
**Por defecto al autocompletar un div aparece la etiqueta class="", por el momento la dejaremos vacía. Recuerda pedir ayuda a los mentores si tienes dudas.**
### Etiquetas semánticas:
HTML5 introduce etiquetas semánticas, que no aportan ningún comportamiento visual adicional, pero que nos permiten por un lado definir de forma semántica el significado de su contenido, lo que será muy útil para el SEO (la optimización de contenidos para buscadores)
Si quieres aprender más [aquí](http://www.tutorialmonsters.com/web-semantica-con-html5/)
### Resumen de etiquetas
Resumen de las etiquetas [aquí](resumen/resumen_de_marcas.md)
## El inspector de elementos
El inspector de elementos, es una herramienta que podemos abrirla haciendo click derecho sobre la página y luego inspect nos muestra el código completo de la página y nos permite modificarlo. Con esta herramienta pueden ver el código de cualquier página web.
Puedes aprender más sobre él [aquí](https://developer.mozilla.org/es/docs/Tools/Page_Inspector)
>Juega un rato con él, inspecciona lo que llevas de tu página,
## Encontrando errores en una página web
Una buena herramienta para detectar errores en tu página es w3c validator. Tiene diversas formas de validar, nosotros ocuparemos **Validate by direct input**, ahí podemos copiar el contenido de nuestra página y ver si hay errores de algún tipo.
# Capítulo 2.
Ahora vamos a saltar al diseño de nuestra página web. Porque un HTML no es nadie si su CSS.
Hemos aprendido algunas cosas esenciales de HTML, lo que vendría siendo el esqueleto de nuestro sitio web, ahora le añadiremos la "piel", el diseño, y eso lo hacemos con CSS.
# ¿Qué es CSS?
CSS es acrónimo de Cascading Style Sheet, o sea hojas de estilo que se pueden incorporar dentro de HTML para darle forma y color a nuestra voluntad.
Hay tres formas de incorporar CSS dentro de una página web.
- La primera es con un conjunto de atributos y valores dentro de la etiqueta del mismo HTML.
- La segunda consiste en agregar el CSS dentro del head del mismo documento HTML.
- La tercera forma consiste en utilizar un archivo externo.
La **forma recomendada de trabajar es la 3º**, pero para explicar como funciona CSS ejemplificaremos sobre la primera y se dará una breve explicación de la segunda.
## Sintaxis y primera forma
Todas las instrucciones en CSS se escriben en pares propiedad: valor, para agregar CSS sobre una etiqueta HTML (Primera forma) debes agregar a la etiqueta syle="propiedad: valor"
## Un ejemplo: color para un párrafo
~~~html
<p style="color: red"> </p>
~~~
## Agregando CSS en el head
La segunda forma de agregar CSS consiste en agregar las propiedades y valores de CSS dentro de una etiqueta style en el head de la página
~~~html
<head>
<style>
p {
color: red
}
</style>
</head>
~~~
### Sintaxis:
La sintaxis de css siempre tiene la siguiente estructura:
~~~css
etiqueta {
propiedad: valor;
}
~~~
<<<<<<< HEAD
=======
## Actividad 06
>>>>>>> 0dd05057d8ed0f00fe015091b3f0d1ce6d35be96
#Cargando un CSS externo:
La tercera forma para incluir CSS en una página web consiste en agregar un link a un CSS externo, con externo se refiere a fuera de la página, pero puede estar dentro del mismo servidor, o se puede cargar desde otro sitio.
Primero creamos un archivo nuevo, dentro de la carpeta de nuestro proyecto, llamado miestilo.css
~~~
proyecto_web
└───miestilo.css
index.html
images
└─── ejemplo.jpg
~~~
El nombre no importa, lo importante es que sea `.css` para que sepa que estamos escribiendo CSS.
Para agregar un link a un css ocuparemos la etiqueta link dentro del `<head>`.
~~~html
<link rel="stylesheet" type="text/css" href="miestilo.css">
~~~
>En Atom si se escribe link y luego se autocompleta con
>tab, la línea para agregar un CSS externo se escribe sola.
Quedando de esta manera:
~~~html
<!DOCTYPE html>
<html>
<head>
<title> Pizza de Pepperoni </title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="miestilo.css">
</head></head>
<body>
.
.
.
</body>
</html>
~~~
Con esto estamos agregando el CSS del archivo miestilo.css a nuestra página web.
## Actividad 01
- Añade y referencia un archivo .css en tu proyecto.
#### Color:
Vamos a cambiarle el color a la letra de nuestro título h1 y h2.
Tomando lo anterior y teniendo ya añadido nuestra hoja de estilo en head.
~~~html
<!DOCTYPE html>
<html>
<head>
<title> Pizza de Pepperoni </title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="miestilo.css">
</head>
<body>
<img src="http://littlecaesars.com.mx/portals/7/Images/HSMenu_HNR_Clasica_Pep_Hisp.png" alt="Deliciosa Pizza">
<h1> Pizza De Peperoni </h1>
..........
</body>
</html>
~~~
Utilizando la misma sintaxis:
~~~css
etiqueta {
propiedad: valor;
}
~~~
Entonces para cambiarle el color a todo el contenido del título `<h1>` y `<h2>`
en nuestro archivo `miestilo.css`, añadimos:
~~~css
h1 {
color: red;
}
h2 {
color: blue;
}
~~~
Debería verse así.
Lo que hace el código anterior es tomar todas las etiquetas tipo `h1` y `h2` y les asigna el color. Siempre debes escribir los colores en inglés.
****
Qué pasa si quiero que toda mi página tenga un color de fondo?
Bueno sabemos que todo el código de nuestra página de encuentra dentro de las etiquetas de `<body>` verdad?
Pues entonces pongámosle un color de fondo:
~~~css
body {
background-color: #F5DA81;
}
~~~
Quedando así:
Vemos que ahora tenemos toda la página con un color distinto al por defecto que es blanco.
Nótese también que ahora no se utilizó darle el color nombrándolo, sino que se utilizó el sistema hexadecimal.
Más Sobre sistema de colores en CSS [aquí](http://htmlcolorcodes.com/es/tutoriales/conceptos-basicos-de-color-css/).
Elige el color que quieras para el fondo de tu página, puedes ayudarte con el siguiente selector de colores.
[Color Picker](https://html-color-codes.info/codigos-de-colores-hexadecimales/)
### Tamaño de la fuente :
Ademas de darle color a la letra también podemos cambiar el tamaño.
Eso se hace utilizando la propiedad `font-size`
~~~css
p {
color: green;
font-size: 20px;
}
~~~
Aquí se puede ver que además de decirle a los párrafos que sean de color rojo, tenga el tamaño de 40 pixeles (`px`). Puedo agregar cuantas propiedades quiera sobre una etiqueta.
Pero esto hará que **todos** los párrafos se comporten de esa manera (que tengan el texto verde y tamaño de letra de 20px).
**¿Cómo hago para personalizar el cambio de una etiqueta específica?**
Ahora lo sabrás:
## ID y Clases
Los **ID** son identificadores **únicos** para cada etiqueta, es como un nombre que se le da a la etiqueta para hacerla única.
Por ejemplo se le asignará el id "parrafo1" al primer párrafo:
~~~html
<p id="parrafo1" > Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Ipsam consequuntur omnis minima dolorem adipisci officiis enim
optio tenetur quos aliquid, saepe, corporis dignissimos?
Harum debitis veritatis voluptas, illum iste deserunt.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quo dolorem dignissimos expedita repellendus ducimus natus
possimus, molestiae architecto, aperiam officiis, amet consequatur,
nisi. Est accusamus eum quos natus architecto modi </p>
~~~
De esta manera yo le puedo dar estilo específico a ese párrafo y no a todos.
Ahora le asigno el estilo en mi archivo miestilo.css
~~~css
#parrafo1 {
color: blue;
font-size: 10px;
}
~~~
Ahora solo mi párrafo con id "parrafo1" tendrá el texto azul y tamaño de fuente de 10px, y los demás serán verdes y con tamaño de 20px.
Se escribe `#` para referirse a una id , y más el nombre para saber a cuál id me estoy refiriendo.
Pero como se mencionaba anteriormente el id es único! Pero qué pasa si se quiere asignar esa propiedad a varias etiquetas distintas?
Para eso existen las **clases**. Las clases es como un identificador pero **no** único.
~~~html
<h1 class="violeta"> Pizza De Pepperoni </h1>
<h2 class=" violeta">Hermosa y Deliciosa pizza, rápida y concisa.</h2>
~~~
Aquí se le está asignando la misma clase a 2 etiquetas distintas (`<h1>`y `<h2>`).
Luego en el archivo css
~~~css
.violeta {
color: violet;
}
~~~
Para referirse a las clases se se escribe un `. ` y luego el nombre que le diste a la clase en este caso `.violeta`