1
00:00:01,010 --> 00:00:16,129
Hola, soy Marcos Moreno Cuesta, de Segundo SMR y este es el proyecto de HTML y CSS de aplicaciones web.

2
00:00:17,190 --> 00:00:19,190
Este es el video de documentación.

3
00:00:19,190 --> 00:00:22,170
este es

4
00:00:22,170 --> 00:00:25,190
el fichero

5
00:00:25,190 --> 00:00:27,070
de documentación

6
00:00:27,070 --> 00:00:29,329
que es lo que te pide

7
00:00:29,329 --> 00:00:31,550
que documentes cada cosa

8
00:00:31,550 --> 00:00:33,369
primero están los encabezados

9
00:00:33,369 --> 00:00:34,109
que es el header

10
00:00:34,109 --> 00:00:37,369
que esto aparece ahí arriba en la página web

11
00:00:37,369 --> 00:00:39,070
y al poner H1

12
00:00:39,070 --> 00:00:39,770
aparece en grande

13
00:00:39,770 --> 00:00:43,450
si tú vas

14
00:00:43,450 --> 00:00:44,630
a

15
00:00:44,630 --> 00:00:46,509
la página

16
00:00:46,509 --> 00:00:47,789
como esto está compuesto

17
00:00:47,789 --> 00:00:49,950
el trabajo está hecho por

18
00:00:49,950 --> 00:00:52,090
la parte css, el html y el

19
00:00:52,090 --> 00:00:54,070
redmi.md, hay dos

20
00:00:54,070 --> 00:00:55,770
carpetas dentro, ahí

21
00:00:55,770 --> 00:00:58,030
bueno, está primero el html

22
00:00:58,030 --> 00:01:00,070
trabajo de recuperación, luego una carpeta

23
00:01:00,070 --> 00:01:01,649
llamada html trabajo

24
00:01:01,649 --> 00:01:03,969
y luego dos carpetas

25
00:01:03,969 --> 00:01:06,390
que una es la parte css y otra el html

26
00:01:06,390 --> 00:01:06,930
vale

27
00:01:06,930 --> 00:01:08,890
y pues si

28
00:01:08,890 --> 00:01:11,909
clicamos aquí y le damos a opening

29
00:01:11,909 --> 00:01:12,709
default browser

30
00:01:12,709 --> 00:01:15,469
bueno, esta ya estaba

31
00:01:15,469 --> 00:01:17,290
el bonicrum, bueno

32
00:01:17,290 --> 00:01:19,950
nos lleva al inicio y esto sería el header

33
00:01:19,950 --> 00:01:21,430
¿ves? aparece en h1

34
00:01:21,430 --> 00:01:23,189
pues aparece así de grande

35
00:01:23,189 --> 00:01:24,609
esto sería h2

36
00:01:24,609 --> 00:01:26,829
parece un poco más pequeño

37
00:01:26,829 --> 00:01:28,829
y

38
00:01:28,829 --> 00:01:31,629
pide

39
00:01:31,629 --> 00:01:35,409
ahora los párrafos

40
00:01:35,409 --> 00:01:36,870
que hay que escribir una p

41
00:01:36,870 --> 00:01:39,150
y pues poner algo de duqueras ahí

42
00:01:39,150 --> 00:01:42,659
que esto sirve pues para

43
00:01:42,659 --> 00:01:45,579
que no se vaya

44
00:01:45,579 --> 00:01:45,859
para

45
00:01:45,859 --> 00:01:48,420
que no siga escribiendo

46
00:01:48,420 --> 00:01:49,019
para allá

47
00:01:49,019 --> 00:01:52,319
que si por ejemplo

48
00:01:52,319 --> 00:01:53,659
pones un párrafo

49
00:01:53,659 --> 00:01:56,319
no siga escribiendo

50
00:01:56,319 --> 00:01:58,060
para allá, no

51
00:01:58,060 --> 00:01:58,879
que baje aquí

52
00:01:58,879 --> 00:02:01,859
que no se vaya

53
00:02:01,859 --> 00:02:02,879
fuera de la pantalla

54
00:02:02,879 --> 00:02:07,140
aquí hay otro párrafo

55
00:02:07,140 --> 00:02:09,500
luego los enlaces que están

56
00:02:09,500 --> 00:02:11,439
para que tú

57
00:02:11,439 --> 00:02:12,599
cliques

58
00:02:12,599 --> 00:02:15,780
aquí está un enlace, aquí hay otro

59
00:02:15,780 --> 00:02:18,520
¿vale? tú clicas

60
00:02:18,520 --> 00:02:20,860
aquí y te lleva al currículum

61
00:02:20,860 --> 00:02:22,580
o aquí te lleva al formulario

62
00:02:22,580 --> 00:02:23,900
al inicio ¿vale?

63
00:02:24,919 --> 00:02:25,960
tienes que escribir

64
00:02:25,960 --> 00:02:27,759
eh

65
00:02:27,759 --> 00:02:29,620
li

66
00:02:29,620 --> 00:02:32,479
y luego la a y ya te sale

67
00:02:32,479 --> 00:02:33,879
pues le das a la a

68
00:02:33,879 --> 00:02:35,560
y ya te pone hr

69
00:02:35,560 --> 00:02:37,219
esto lo pones tú

70
00:02:37,219 --> 00:02:39,419
el enlace que tú quieras y esto

71
00:02:39,419 --> 00:02:41,400
es

72
00:02:41,400 --> 00:02:44,520
no vas a querer que aparezca

73
00:02:44,520 --> 00:02:47,639
el enlace en tu página

74
00:02:47,639 --> 00:02:50,800
que si tú clicas en inicio

75
00:02:50,800 --> 00:02:54,120
en realidad estés en el enlace y te lleve a tal sitio

76
00:02:54,120 --> 00:02:55,939
luego las imágenes

77
00:02:55,939 --> 00:02:59,800
las imágenes hay que poner

78
00:02:59,800 --> 00:03:02,860
img, esto se pone solo, luego la página web

79
00:03:02,860 --> 00:03:05,639
y luego esto es por si

80
00:03:05,639 --> 00:03:08,539
la página no carga, o sea la imagen no carga

81
00:03:08,539 --> 00:03:11,500
aparezca esta palabra, aquí ves

82
00:03:11,500 --> 00:03:14,060
que yo quito

83
00:03:14,060 --> 00:03:14,479
esta

84
00:03:14,479 --> 00:03:17,360
esta ruta

85
00:03:17,360 --> 00:03:19,219
lo guardo

86
00:03:19,219 --> 00:03:21,419
me voy a la página y mira

87
00:03:21,419 --> 00:03:23,840
CodeLini, aparece una palabra

88
00:03:23,840 --> 00:03:25,500
¿vale? porque no carga

89
00:03:25,500 --> 00:03:28,979
entonces

90
00:03:28,979 --> 00:03:31,819
ahora las tablas

91
00:03:31,819 --> 00:03:33,520
están en el currículum

92
00:03:33,520 --> 00:03:36,419
vamos aquí primero

93
00:03:36,419 --> 00:03:37,680
están

94
00:03:37,680 --> 00:03:38,800
las tablas

95
00:03:38,800 --> 00:03:40,860
y luego estas

96
00:03:40,860 --> 00:03:47,099
aquí están las TH

97
00:03:47,099 --> 00:03:48,139
y las TD

98
00:03:48,139 --> 00:03:51,139
TH pues aparece esto así

99
00:03:51,139 --> 00:03:54,099
en línea

100
00:03:54,099 --> 00:03:56,240
y TD

101
00:03:56,240 --> 00:03:57,740
es para que

102
00:03:57,740 --> 00:04:03,340
TH aparece en línea

103
00:04:03,340 --> 00:04:06,659
vale

104
00:04:06,659 --> 00:04:09,039
primero hay que poner tabla

105
00:04:09,039 --> 00:04:11,199
TR, TH, TD

106
00:04:11,199 --> 00:04:12,620
depende de lo que tú quieras poner

107
00:04:12,620 --> 00:04:15,280
luego

108
00:04:15,280 --> 00:04:24,839
Luego pide listas, que hay que escribir li, en tabla hay que poner esto i, luego esto

109
00:04:24,839 --> 00:04:33,339
para cerrar, porque si no no va a aparecer nada, luego li, así se hace una lista, hay

110
00:04:33,339 --> 00:04:42,079
que escribir li html css li, luego abajo otra vez li, así consecutivamente, luego los bloques

111
00:04:42,079 --> 00:04:55,319
o las Sections. Yo escribo Sections y es como que divide las partes. Por ejemplo, esto de

112
00:04:55,319 --> 00:05:07,269
aquí es una Sections, esto es otra Sections. Los formularios. Nos vamos al formulario y

113
00:05:07,269 --> 00:05:14,110
hay varios tipos. Pues este está para poner tu nombre, tu correo, tu contraseña, etc.

114
00:05:14,110 --> 00:05:16,790
Un teléfono, la edad, el legado.

115
00:05:17,389 --> 00:05:20,410
Pues entonces así sube el número y así baja.

116
00:05:21,069 --> 00:05:22,850
Luego la fecha de nacimiento.

117
00:05:25,629 --> 00:05:29,290
Le das aquí y te lleva a tu explorador de archivos.

118
00:05:30,709 --> 00:05:33,310
Luego esto, pues para poner tu sitio web.

119
00:05:33,810 --> 00:05:35,290
Esto es como un rango.

120
00:05:36,470 --> 00:05:36,769
¿Vale?

121
00:05:37,089 --> 00:05:38,769
¿Cómo eres satisfecho?

122
00:05:38,769 --> 00:05:39,870
Pues aquí está bien.

123
00:05:40,329 --> 00:05:40,670
¿Qué más?

124
00:05:41,089 --> 00:05:41,610
Comentarios.

125
00:05:41,670 --> 00:05:43,569
Si tú le das aquí lo puedes hacer más grande.

126
00:05:44,110 --> 00:05:47,290
y masculinas pues para que tú puedas

127
00:05:47,290 --> 00:05:48,569
elegir

128
00:05:48,569 --> 00:05:50,470
luego enviar

129
00:05:50,470 --> 00:05:52,550
esto es pues por ejemplo

130
00:05:52,550 --> 00:05:55,389
el de

131
00:05:55,389 --> 00:05:58,740
por ejemplo el de

132
00:05:58,740 --> 00:06:00,220
textos para poner un texto

133
00:06:00,220 --> 00:06:02,540
siempre hay que poner el

134
00:06:02,540 --> 00:06:04,879
input type es importante pues para que

135
00:06:04,879 --> 00:06:06,759
dependiendo de que tipo

136
00:06:06,759 --> 00:06:08,939
sea el formulario que tú vayas a

137
00:06:08,939 --> 00:06:10,699
querer

138
00:06:10,699 --> 00:06:12,319
pues te va a aparecer

139
00:06:12,319 --> 00:06:14,660
distintas configuraciones por ejemplo

140
00:06:14,660 --> 00:06:16,740
nombre, pues

141
00:06:16,740 --> 00:06:18,620
el id es edad, vale

142
00:06:18,620 --> 00:06:20,120
luego

143
00:06:20,120 --> 00:06:23,040
file

144
00:06:23,040 --> 00:06:24,699
es tipo de archivo

145
00:06:24,699 --> 00:06:26,779
pues por esto sale lo de

146
00:06:26,779 --> 00:06:28,240
lo de

147
00:06:28,240 --> 00:06:31,100
lo de

148
00:06:31,100 --> 00:06:32,620
seleccionar el archivo

149
00:06:32,620 --> 00:06:34,420
esto es para

150
00:06:34,420 --> 00:06:36,779
el de select es pues

151
00:06:36,779 --> 00:06:39,100
es para que te dé varias opciones

152
00:06:39,100 --> 00:06:40,819
luego

153
00:06:40,819 --> 00:06:43,060
está este que es para darle a enviar

154
00:06:43,060 --> 00:06:44,839
el de comentarios

155
00:06:44,839 --> 00:06:48,980
el de rango

156
00:06:48,980 --> 00:06:51,040
pues para la barra

157
00:06:51,040 --> 00:06:51,620
del rango

158
00:06:51,620 --> 00:06:54,220
si puedes poner su url

159
00:06:54,220 --> 00:06:56,899
el color, pues para que tú puedas

160
00:06:56,899 --> 00:06:57,899
elegir el color

161
00:06:57,899 --> 00:07:01,120
o sea, esto lo puedes poner muy bien

162
00:07:01,120 --> 00:07:03,120
pues tú tienes que poner

163
00:07:03,120 --> 00:07:03,540
esto

164
00:07:03,540 --> 00:07:07,480
y luego el tipo de formulario que tú quieras

165
00:07:07,480 --> 00:07:08,759
luego

166
00:07:08,759 --> 00:07:11,740
los vídeos

167
00:07:11,740 --> 00:07:13,660
Esto está en el

168
00:07:13,660 --> 00:07:16,079
Sobre el proyecto

169
00:07:16,079 --> 00:07:16,920
¿Vale?

170
00:07:17,879 --> 00:07:19,279
Está este vídeo

171
00:07:19,279 --> 00:07:22,519
Bueno, este es un vídeo que he grabado antes

172
00:07:22,519 --> 00:07:23,959
Pero bueno

173
00:07:23,959 --> 00:07:25,399
Ahora pondré otro

174
00:07:25,399 --> 00:07:27,060
El que estoy grabando ahora

175
00:07:27,060 --> 00:07:27,819
¿Vale?

176
00:07:31,100 --> 00:07:32,240
Pues el vídeo

177
00:07:32,240 --> 00:07:33,779
Está aquí

178
00:07:33,779 --> 00:07:35,560
Y lo que hay que poner es

179
00:07:35,560 --> 00:07:39,040
El vídeo

180
00:07:39,040 --> 00:07:40,040
Control with

181
00:07:40,040 --> 00:07:42,040
Source SRC

182
00:07:42,040 --> 00:08:20,120
Y el enlace del vídeo, tipo mp4, vale, esto es lo que va a salir si el vídeo no carga, bueno, esto es el footer, que esto es lo que va a aparecer debajo de todas las páginas, vale, así, luego, ahora vamos a los estilos, que están los CSS selectores de distintos tipos,

183
00:08:20,120 --> 00:08:22,779
pues está el body, el header, el nav

184
00:08:22,779 --> 00:08:24,560
el header es pues para poner

185
00:08:24,560 --> 00:08:26,519
la cabecera bien, el body pues

186
00:08:26,519 --> 00:08:27,519
para poner

187
00:08:27,519 --> 00:08:30,459
lo que sería esto

188
00:08:30,459 --> 00:08:31,660
vale

189
00:08:31,660 --> 00:08:33,580
aquí está

190
00:08:33,580 --> 00:08:36,259
por ejemplo el body

191
00:08:36,259 --> 00:08:38,220
el tipo de, esto es bueno

192
00:08:38,220 --> 00:08:40,799
luego lo que hice también pero es el tipo de letra

193
00:08:40,799 --> 00:08:42,519
el header pues el

194
00:08:42,519 --> 00:08:43,179
color

195
00:08:43,179 --> 00:08:46,700
donde que es que esté el texto pues que esté centrado

196
00:08:46,700 --> 00:08:48,279
esto es para centrar el texto

197
00:08:48,279 --> 00:08:49,539
vale

198
00:08:49,539 --> 00:08:52,240
la navegación, pues esto es para

199
00:08:52,240 --> 00:08:56,279
esto

200
00:08:56,279 --> 00:08:58,039
de qué color quieres que sea

201
00:08:58,039 --> 00:08:58,700
esta parte

202
00:08:58,700 --> 00:09:03,259
esta parte también

203
00:09:03,259 --> 00:09:05,440
luego

204
00:09:05,440 --> 00:09:08,059
está los colores

205
00:09:08,059 --> 00:09:09,700
que pones

206
00:09:09,700 --> 00:09:12,220
color y te pones lo que quieras

207
00:09:12,220 --> 00:09:13,440
o el back color que esto es

208
00:09:13,440 --> 00:09:15,019
el color de fondo

209
00:09:15,019 --> 00:09:18,299
por ejemplo

210
00:09:18,299 --> 00:09:19,799
background color

211
00:09:19,799 --> 00:09:20,779
es color del fondo

212
00:09:20,779 --> 00:09:22,980
de la página

213
00:09:22,980 --> 00:09:24,279
¿vale?

214
00:09:25,299 --> 00:09:26,100
luego está

215
00:09:26,100 --> 00:09:27,799
el de las dimensiones

216
00:09:27,799 --> 00:09:28,700
que es para hacer más grande

217
00:09:28,700 --> 00:09:29,179
por ejemplo

218
00:09:29,179 --> 00:09:30,100
los márgenes

219
00:09:30,100 --> 00:09:35,320
pues también está

220
00:09:35,320 --> 00:09:35,840
el de caja

221
00:09:35,840 --> 00:09:36,320
que es para

222
00:09:36,320 --> 00:09:37,120
las cajas

223
00:09:37,120 --> 00:09:37,740
sería

224
00:09:37,740 --> 00:09:39,019
esto es una caja

225
00:09:39,019 --> 00:09:39,600
¿vale?

226
00:09:43,840 --> 00:09:44,980
esto sería una caja

227
00:09:44,980 --> 00:09:49,600
que lo que ves

228
00:09:49,600 --> 00:09:50,600
pues aparece

229
00:09:50,600 --> 00:09:51,480
esto de aquí

230
00:09:51,480 --> 00:09:52,980
¿vale?

231
00:09:54,139 --> 00:09:54,580
luego

232
00:09:54,580 --> 00:09:59,179
puedes hacer más grande la caja

233
00:09:59,179 --> 00:10:01,600
puedes hacer otra aquí

234
00:10:01,600 --> 00:10:03,220
o otra aquí al lado

235
00:10:03,220 --> 00:10:04,679
y tal

236
00:10:04,679 --> 00:10:07,039
las imágenes de fondo

237
00:10:07,039 --> 00:10:09,970
pues

238
00:10:09,970 --> 00:10:13,029
está

239
00:10:13,029 --> 00:10:14,730
aquí

240
00:10:14,730 --> 00:10:16,970
en el proyecto y sería

241
00:10:16,970 --> 00:10:17,809
esta imagen

242
00:10:17,809 --> 00:10:21,230
que primero tienes que poner esto

243
00:10:21,230 --> 00:10:22,509
para poner la imagen

244
00:10:22,509 --> 00:10:23,549
luego esto

245
00:10:23,549 --> 00:10:26,070
si no quieres que

246
00:10:26,210 --> 00:10:32,210
aparezca varias veces la imagen, o sea, queda muy mal.

247
00:10:32,210 --> 00:10:46,759
Entonces así, si te vas al proyecto, bueno, también si quitas esto.

248
00:10:46,759 --> 00:10:57,759
Esto es para que cubra toda la parte trasera, que aparece así de mal.

249
00:10:57,759 --> 00:11:21,350
Luego, está también el float, que esto es básicamente, no lo tengo puesto, pero es si quieres que se quede arriba esto, la cabecera y el navegador.

250
00:11:21,350 --> 00:11:28,269
luego está el texto que es para poner las distintas partes del texto

251
00:11:28,269 --> 00:11:29,710
allí lo mismo

252
00:11:29,710 --> 00:11:30,909
los enlaces

253
00:11:30,909 --> 00:11:38,070
esto si quieres que esté subrayado el enlace cuando tú pones el cursor encima

254
00:11:38,070 --> 00:11:45,429
las listas pues para hacerlas más grandes

255
00:11:45,429 --> 00:11:50,110
o el tipo de lista que quieras

256
00:11:50,110 --> 00:11:51,710
las tablas

257
00:11:51,710 --> 00:11:53,669
esto es para hacer las tablas

258
00:11:53,669 --> 00:11:56,850
el tamaño de las tablas más grandes

259
00:11:56,850 --> 00:11:58,350
y tal

260
00:11:58,350 --> 00:12:00,549
las imágenes para ajustar el tamaño

261
00:12:00,549 --> 00:12:03,029
hacer más pequeñas

262
00:12:03,029 --> 00:12:04,129
más grandes, más anchas

263
00:12:04,129 --> 00:12:06,509
si quieres también

264
00:12:06,509 --> 00:12:08,269
el borde es

265
00:12:08,269 --> 00:12:09,809
por si quieres que las imágenes

266
00:12:09,809 --> 00:12:11,149
más grandes

267
00:12:11,149 --> 00:12:16,470
esto es por si quieres que las imágenes

268
00:12:16,470 --> 00:12:23,340
a ver

269
00:12:23,340 --> 00:12:25,539
si quieres que las imágenes

270
00:12:25,539 --> 00:12:42,039
aparezcan así, con el borde así, como con una curva, y luego los formularios, pues hay distintos tipos, que es el form, el label, el input,

271
00:12:42,039 --> 00:13:07,519
Tarea, textarea, luego pide la página principal, pues la página principal es esta, que es el index, el currículum, con el footer, una lista aquí de imagen, el formulario y los distintos proyectos.

272
00:13:07,519 --> 00:13:29,620
Bueno, el proyecto que ahora tengo que poner aquí, el vídeo que estoy grabando ahora, una lista, luego también pedía un enlace a GitHub. Bueno, lo he puesto aquí también, ¿vale? Y ya estaría. Ya está el proyecto.