1
00:00:00,110 --> 00:00:06,290
Hola, voy a comenzar a explicar cómo podemos crear una página web de una forma muy sencilla.

2
00:00:06,730 --> 00:00:12,730
Para ello lo único que necesitamos es tener un editor de código HTML, como puede ser Sublime Test,

3
00:00:13,089 --> 00:00:16,850
en el cual, como podéis ver, vamos a tener ya creadas dos páginas,

4
00:00:17,170 --> 00:00:20,429
una página con extensión HTML a la que llamaremos página web

5
00:00:20,429 --> 00:00:25,170
y otra página con extensión CSS que la vamos a llamar estilo.

6
00:00:25,170 --> 00:00:37,909
Bueno, pues el Sublime Test es un editor de código HTML que nos va a ayudar a escribir este código a medida que vayamos escribiendo algunas palabras que él reconoce como claves.

7
00:00:38,369 --> 00:00:45,950
Para comenzar, ponemos el signo de admiración y ya nos aparece la estructura de una página HTML.

8
00:00:45,950 --> 00:01:00,789
A continuación lo que vamos a hacer es darle un título a nuestra página en lugar de documento, vamos a decir por ejemplo que es página web y lo primero que vamos a hacer es dentro del body vamos a crear un título.

9
00:01:00,789 --> 00:01:22,469
A ver, lo ponemos así, H1 y le vamos a llamar mi primera página web.

10
00:01:22,989 --> 00:01:26,569
Muy bien, vamos a ir viendo cómo nos está quedando nuestra página.

11
00:01:26,849 --> 00:01:34,640
Guardamos, vemos que ya nos va apareciendo el título que hemos puesto.

12
00:01:35,459 --> 00:01:38,260
Seguimos editando y lo siguiente que vamos a hacer,

13
00:01:38,260 --> 00:02:06,129
Vamos a meter unas cabeceras de menú, pues dentro lo que vamos a ver es, metemos una etiqueta nav, a continuación, lo que vamos a hacer es meter una lista de elementos,

14
00:02:06,129 --> 00:03:11,889
no se me ha cerrado, vale, bien, dentro de mi lista de elementos y le vamos a meter unos enlaces, menú 1, vale, y así vamos a crear dos menús más y menú 3, perfecto, salvamos y vamos viendo, bien, como nos están apareciendo,

15
00:03:12,930 --> 00:03:14,289
¡Estupendo!

16
00:03:14,569 --> 00:03:16,889
A continuación, ¿qué es lo que vamos a hacer?

17
00:03:16,889 --> 00:03:26,729
Bueno, pues después de esta sección lo que vamos a crear es otra para poder meter un texto.

18
00:03:29,990 --> 00:03:36,969
A esta sección de edit la vamos a tener con la clase artículo.

19
00:03:37,629 --> 00:03:38,509
Perfecto.

20
00:03:40,879 --> 00:03:48,479
Vamos a meter otra clase que sea secciones.

21
00:03:48,979 --> 00:04:18,620
Vale, y dentro de esta clase sí que ya vamos a meter un párrafo y aquí vamos a poner, en el momento que ponemos Lore, pues ya nos aparece pues un texto que es el que se suele poner por defecto.

22
00:04:18,620 --> 00:04:42,259
Vamos a ver cómo está quedando nuestra página, vale, perfecto, ya nos está apareciendo nuestro título, bueno, pero esta página sí, pues no tiene un aspecto bonito, vamos a irla dando estilos, entonces lo primero que vamos a hacer para los estilos es, le vamos a poner para que esté todo un padding y un margen de cero,

23
00:04:42,259 --> 00:05:10,389
un parín de 0 y un margen también de 0, perfecto, que más cosas vamos, que nos quede así, mucho mejor, visualizamos mejor,

24
00:05:10,389 --> 00:05:22,410
que vamos a poner también pues nuestro título h1, lo que vamos a hacer es que sea, que esté centrado,

25
00:05:22,410 --> 00:05:56,250
vamos a poner, este no es, test aline, este center, perfecto, que vamos a poner, pues que el fondo, background color, sea blanco, que tenga un color blanco,

26
00:05:56,250 --> 00:06:11,790
Y por último, los margen, el padding, vamos a ponerle de 20 píxeles, quedará bien.

27
00:06:12,870 --> 00:06:18,829
¿Vale? Vamos a ver cómo nos va quedando nuestra página con estos estilos que hemos dado.

28
00:06:21,100 --> 00:06:28,339
Ah, importante, claro, tenemos que referenciar en nuestra página HTML nuestro fichero de estilos,

29
00:06:28,339 --> 00:06:46,100
porque si no, no nos sirve, para ello nos vamos dentro de gea, vamos a poner nuestro link y aquí tipe y el estilo,

30
00:06:46,100 --> 00:07:00,509
que se llama estilo.css, esta es la manera en la que tenemos, perfecto, veis como está quedando, fenomenal,

31
00:07:00,509 --> 00:07:24,379
Bien, vamos a ir siguiendo dando estilos a nuestra página web, ¿veis? De una manera muy sencilla estamos definiendo una página web y aplicándola estilos. Esto es lo que aprenderemos en nuestro curso, con saber unas cuantas etiquetas HTML y unas cuantas de CSS podemos crear páginas web estupendas.

32
00:07:24,379 --> 00:07:27,899
vamos a ver a nuestra lista

33
00:07:27,899 --> 00:07:31,600
que estilos la vamos dando

34
00:07:31,600 --> 00:07:33,220
pues por ejemplo el color

35
00:07:33,220 --> 00:07:34,920
vamos a poner naranja

36
00:07:34,920 --> 00:07:36,139
path ground color

37
00:07:36,139 --> 00:07:38,060
orange

38
00:07:38,060 --> 00:07:42,290
que más vamos a hacer

39
00:07:42,290 --> 00:07:44,470
el ancho width

40
00:07:44,470 --> 00:07:47,389
le vamos a poner un 100%

41
00:07:47,389 --> 00:07:49,050
que nos ocupe

42
00:07:49,050 --> 00:07:55,490
para que las listas

43
00:07:55,490 --> 00:07:57,170
no nos aparezcan

44
00:07:57,170 --> 00:07:58,089
estilo type

45
00:07:58,089 --> 00:08:00,290
con ese azulito

46
00:08:00,290 --> 00:08:02,850
más feo, le ponemos

47
00:08:02,850 --> 00:08:04,529
que sea no en el estilo

48
00:08:04,529 --> 00:08:06,769
y que estén centradas

49
00:08:06,769 --> 00:08:09,050
test al in, test al in

50
00:08:09,050 --> 00:08:10,709
vamos a poner

51
00:08:10,709 --> 00:08:11,769
center

52
00:08:11,769 --> 00:08:14,709
guardamos y veréis

53
00:08:14,709 --> 00:08:18,689
como va quedando, veis

54
00:08:18,689 --> 00:08:20,750
naranja

55
00:08:20,750 --> 00:08:22,329
y nos va quedando ya

56
00:08:22,329 --> 00:08:26,610
como queremos

57
00:08:26,610 --> 00:08:34,620
muy bien, vamos a seguir

58
00:08:34,620 --> 00:08:38,200
haciendo más

59
00:08:38,200 --> 00:08:40,080
cositas para que nos vaya quedando

60
00:08:40,080 --> 00:08:44,460
y de esta manera

61
00:08:44,460 --> 00:08:46,080
hacemos display

62
00:08:46,080 --> 00:08:48,440
y vamos a poner

63
00:08:48,440 --> 00:08:49,679
inline

64
00:08:49,679 --> 00:08:52,080
flesh

65
00:08:52,080 --> 00:08:56,220
al bar todo

66
00:08:56,220 --> 00:09:00,799
fenomenal

67
00:09:00,799 --> 00:09:02,460
nos va quedando

68
00:09:02,460 --> 00:09:13,000
vamos aquí tenemos todas nuestras etiquetas cerradas

69
00:09:13,000 --> 00:09:14,720
si

70
00:09:14,720 --> 00:09:20,679
hay una cosa

71
00:09:20,679 --> 00:09:23,059
que a ver por cada una de estas

72
00:09:23,059 --> 00:09:36,399
así

73
00:09:36,399 --> 00:09:38,919
esta, es que si no no nos estaba

74
00:09:38,919 --> 00:09:41,139
quedando correcto

75
00:09:41,139 --> 00:09:42,639
así

76
00:09:42,639 --> 00:09:48,600
perfecto, esta nos

77
00:09:48,600 --> 00:09:50,299
sobra, vale

78
00:09:50,299 --> 00:09:52,480
salvar

79
00:09:52,480 --> 00:09:53,340
todo

80
00:09:53,340 --> 00:09:58,830
nos vamos, perfecto

81
00:09:58,830 --> 00:09:59,710
vamos a ir

82
00:09:59,710 --> 00:10:06,409
tenemos li li li li

83
00:10:06,409 --> 00:10:08,429
y cerramos la

84
00:10:08,429 --> 00:10:09,970
y cerramos la

85
00:10:09,970 --> 00:10:12,049
perfecto

86
00:10:12,049 --> 00:10:14,029
muy bien, vamos a nuestra

87
00:10:14,029 --> 00:10:17,370
de estilos y que más vamos a dar

88
00:10:17,370 --> 00:10:19,529
a nuestro estilo

89
00:10:19,529 --> 00:10:20,809
que más podemos hacer

90
00:10:20,809 --> 00:10:22,529
bueno pues vamos a ver

91
00:10:22,529 --> 00:10:24,649
nat a

92
00:10:24,649 --> 00:10:26,389
para nuestros enlaces

93
00:10:26,389 --> 00:10:28,690
y vamos a poner

94
00:10:28,690 --> 00:10:30,590
el test decoración

95
00:10:30,590 --> 00:10:32,529
como none

96
00:10:32,529 --> 00:10:36,970
vamos a poner el color

97
00:10:36,970 --> 00:10:41,340
como blanco

98
00:10:41,340 --> 00:10:49,870
vamos a poner el padding

99
00:10:49,870 --> 00:10:54,730
a 10 píxeles

100
00:10:54,730 --> 00:11:00,110
y vamos a poner el ancho a 150.

101
00:11:03,149 --> 00:11:05,950
De esta manera nuestros enlaces nos van a quedar

102
00:11:05,950 --> 00:11:07,970
mucho más bonitos, ¿veis?

103
00:11:09,649 --> 00:11:11,269
Nos han quedado mucho más bonitos.

104
00:11:11,269 --> 00:11:13,029
¿Que queremos poner una foto?

105
00:11:13,330 --> 00:11:15,009
Bueno, pues tenemos ya preparado,

106
00:11:17,159 --> 00:11:18,399
tengo buscado una foto

107
00:11:18,399 --> 00:11:21,139
y lo que hacemos aquí es

108
00:11:21,139 --> 00:11:53,029
Entonces dentro de, vamos a ponerla aquí, otra caja de div, vale, y aquí vamos a poner una imagen, vale, que se, que la, vamos, hemos llamado flor, ¿veis?

109
00:11:55,320 --> 00:12:03,120
Con muy pocos elementos tenemos una página web, mi primera página web, que tenemos enlaces, que tenemos un texto y hemos incluido una foto.

110
00:12:05,799 --> 00:12:06,519
pues vamos a ello.

111
00:12:06,700 --> 00:12:09,080
Vamos a aprender HTML para hacer páginas web

112
00:12:09,080 --> 00:12:13,840
que nos sirvan para luego tener ese conocimiento

113
00:12:13,840 --> 00:12:15,340
que nos ayude a nuestros clientes.

114
00:12:15,799 --> 00:12:16,059
Gracias.