1
00:00:00,620 --> 00:00:07,980
we're going to start this exercise by creating a new file right click on the desktop create a

2
00:00:07,980 --> 00:00:18,539
document new file we're going to change the name with our own name followed by point html this is

3
00:00:18,539 --> 00:00:24,300
absolutely key otherwise we are not going to be able to start working with a web browser

4
00:00:24,300 --> 00:00:28,559
now we're going to open this file with

5
00:00:28,559 --> 00:00:32,500
editor de texto se cite, abrir con, again

6
00:00:32,500 --> 00:00:36,679
this one, this site, cite, or however this is spelled in English

7
00:00:36,679 --> 00:00:39,359
I don't know, editor, there we go

8
00:00:39,359 --> 00:00:44,619
right now it's totally blank, it's white, so we haven't

9
00:00:44,619 --> 00:00:47,600
edited yet, and we haven't introduced any content

10
00:00:47,600 --> 00:00:52,600
in order to do so, following the right structure, we're going to open

11
00:00:52,600 --> 00:00:59,399
our web browser doesn't matter which one firefox or whatever and we're going to write down w3

12
00:00:59,399 --> 00:01:08,670
schools okay schools that's the one that we're going to search for this is one of the results

13
00:01:08,670 --> 00:01:13,950
that we're going to get the first one is going to be good enough we go directly into html tutorial

14
00:01:14,510 --> 00:01:27,680
like this now the main important thing is we go directly into the next step of it here we have a

15
00:01:29,680 --> 00:01:38,799
complete example of the structure of a web page and this is the one that we are going to copy

16
00:01:38,799 --> 00:01:45,840
there you can see copy and we're going to paste it now we're going to save it

17
00:01:45,840 --> 00:01:54,299
nice now we are going to minimize this one and we're going to do double click

18
00:01:54,299 --> 00:01:59,900
on our web page the one that we are working with so as you can see we have

19
00:01:59,900 --> 00:02:05,980
the same file only opened with two different programs and this one we're

20
00:02:05,980 --> 00:02:11,180
going to edit the contents in this one we are going to see the result we're

21
00:02:11,180 --> 00:02:16,419
going to do ctrl view we're going to zoom in we're going to zoom in in order

22
00:02:16,419 --> 00:02:22,620
to have a wider view of our web page and we're going to start editing some of the

23
00:02:22,620 --> 00:02:27,819
contents for instance here in title page title which you can see here is in the

24
00:02:27,819 --> 00:02:34,680
other part of the ribbon we're going to change and we're going to write it down

25
00:02:34,840 --> 00:02:42,840
personal web page this shouldn't be very long is that so since of course it's going to be part

26
00:02:42,840 --> 00:02:51,000
of that ribbon we're going to save it and now here we're going to refresh and as you can see

27
00:02:51,000 --> 00:02:58,520
we already have been able to insert our content into the title of the ribbon this same

28
00:02:59,240 --> 00:03:07,719
text is going to be copied and we are going to paste it in between these both tags h1

29
00:03:08,840 --> 00:03:15,479
it opens here and it closes there as you can see with a slash 7 we're going to paste it

30
00:03:16,680 --> 00:03:23,639
we're going to save it we're going to refresh and again as you can see the one text that is

31
00:03:23,639 --> 00:03:33,960
in between these both tags means that this is the main title and it's bold and has a bigger

32
00:03:34,599 --> 00:03:43,000
font type here in my first paragraph is the one part of the main body that is this is going to

33
00:03:43,000 --> 00:03:50,280
be the main text here you can write whatever you want to but just in case if you feel you don't

34
00:03:50,280 --> 00:03:58,280
have enough imagination in order to write down your full name, then you can use always the

35
00:03:58,280 --> 00:04:06,520
following trick in order to do a mock-up. A mock-up is a text simulation and we're going

36
00:04:06,520 --> 00:04:17,959
to write down lorem ipsum. Lorem ipsum is a Latin text that is going to allow us, for instance,

37
00:04:17,959 --> 00:04:30,860
this one here to create random text as this one here let's say let's create for

38
00:04:30,860 --> 00:04:36,620
instance here how many paragraphs let's create for instance just one single

39
00:04:36,620 --> 00:04:42,980
paragraph we don't need more than that and we create it and here we have it so

40
00:04:42,980 --> 00:04:47,899
it's a lot of text that nobody's going to understand and it's not going to

41
00:04:47,899 --> 00:04:52,040
hurt the feelings of of anyone anyways now this is the one that we are going to

42
00:04:52,040 --> 00:05:01,459
paste it here we have it paste good let's see how this works save it and we

43
00:05:01,459 --> 00:05:07,579
go back into our web page and we as you can see it's perfectly done here we have

44
00:05:07,579 --> 00:05:14,279
the main text nice so this would be the main structure of a web page let's go

45
00:05:14,279 --> 00:05:24,540
ahead and go on we're going upwards in our tutorial and we're going next we're going to

46
00:05:24,540 --> 00:05:30,360
skip the thing about the editors since we already know we're using editors we go into the next one

47
00:05:30,360 --> 00:05:39,660
we also are going to skip basic examples and we go directly into attributes which is not this one

48
00:05:39,660 --> 00:05:44,839
here here in elements they do explain something we already know which is the

49
00:05:44,839 --> 00:05:56,040
age tags the higher the number the smaller that title is going to be so we

50
00:05:56,040 --> 00:06:00,660
go onwards and here here is the one thing we are going to start copying and

51
00:06:00,660 --> 00:06:08,819
pasting so here as you can see is the the main tag for introducing links this

52
00:06:08,819 --> 00:06:15,860
is the one that we are going to copy and we are going to paste it in between the

53
00:06:15,860 --> 00:06:22,620
main title and the paragraph, for instance like this. We're going to zoom

54
00:06:22,620 --> 00:06:29,639
out a little bit in order to have a wider scope of the structure and we're

55
00:06:29,639 --> 00:06:35,519
going to save it and again here we have to be careful what we have opened

56
00:06:35,519 --> 00:06:44,240
already and whatnot we're going to refresh and here we have our first introduced link as you

57
00:06:44,240 --> 00:06:52,399
can see it's directly linking into well the w three schools so on so forth so this is going

58
00:06:52,399 --> 00:07:01,600
to be changed first of all we're going to need to determine the web page that we are going to

59
00:07:01,600 --> 00:07:10,639
place here as our link. And we're going to use Aula Virtual. Aula Virtual EducaMadrid.

60
00:07:12,000 --> 00:07:18,800
So we're going to save it, we're going to refresh it, and as you can see we will change that text,

61
00:07:18,800 --> 00:07:26,639
but we haven't changed the the direction, the address. If we do click on it, as you can see,

62
00:07:26,639 --> 00:07:32,800
it goes directly into the tutorial and we don't want that so we go backwards

63
00:07:32,800 --> 00:07:36,959
and we're going to change so since i don't remember exactly

64
00:07:36,959 --> 00:07:43,120
the link of aula virtual i'm going to first of all going to educa madrid

65
00:07:43,120 --> 00:07:48,000
nothing new about this and here we have the aula virtual doing

66
00:07:48,000 --> 00:07:54,240
so we're going to copy that one the address and here

67
00:07:54,240 --> 00:08:00,800
you will have to be very very careful and just select the text that is in between

68
00:08:03,040 --> 00:08:11,920
the quotation marks so let's paste it there we go and this should do the trick let's see if that's

69
00:08:12,639 --> 00:08:18,800
right first of all let's refresh it here we go as you can see the text doesn't change at all

70
00:08:18,800 --> 00:08:23,360
but if we do click on it it goes directly into the aula virtual which is good

71
00:08:24,240 --> 00:08:28,100
which is so dandy. Let's go ahead.

72
00:08:28,100 --> 00:08:31,699
Next step.

73
00:08:31,699 --> 00:08:37,419
The source attribute. The source attribute is going to allow us to paste

74
00:08:37,419 --> 00:08:41,220
images. So let's determine

75
00:08:41,220 --> 00:08:45,460
in our example where we want to place

76
00:08:45,460 --> 00:08:49,460
the image. For instance, in my case I'm going to put it

77
00:08:49,460 --> 00:08:53,480
even before the link. I'm going to start with the

78
00:08:53,480 --> 00:08:56,919
image there on the upper part of my web page

79
00:08:56,919 --> 00:09:03,399
so that means i'm going to copy the code so i don't need to to write it down so i

80
00:09:03,399 --> 00:09:08,360
won't make any mistakes

81
00:09:08,360 --> 00:09:15,480
and now i have to of course search for a link of an image that

82
00:09:15,480 --> 00:09:22,200
makes this this image available so again

83
00:09:22,200 --> 00:09:27,879
so this is what we're going to do we're going to search for Comunidad de Madrid

84
00:09:32,879 --> 00:09:39,919
that's it and images Comunidad de Madrid and we're going to search for a free one

85
00:09:44,399 --> 00:09:49,759
or Creative Commons one which should be very easy to find for instance this one here of the

86
00:09:49,759 --> 00:09:58,480
wikipedia this this one here it's going to be good enough so let's uh save let's copy

87
00:09:58,480 --> 00:10:04,960
not the image but the direction the address of the image this is the one thing that we need to

88
00:10:05,759 --> 00:10:13,360
we copy that one and we placed it we place it precisely in between the quotation marks

89
00:10:13,360 --> 00:10:21,299
like that i hope this is going to be good enough it's rather long as you can see but i hope it

90
00:10:21,299 --> 00:10:31,279
works fine so we're going to save it again let's go back here and refresh it and here we have it

91
00:10:31,279 --> 00:10:41,279
but as you can see i've placed my image above the title that's not what i wanted so i'm going to

92
00:10:41,279 --> 00:10:50,100
change this location I'm going to cut it instead of copying control X would have

93
00:10:50,100 --> 00:10:58,919
been also the the shortcut and let's save it again and let's see how this

94
00:10:58,919 --> 00:11:05,840
works now now it's in between as you can see but you know that and so on so forth

95
00:11:05,840 --> 00:11:16,919
good let's go ahead after the source attribute we will also be able to change

96
00:11:16,919 --> 00:11:23,820
the width and the height of our images as you can see here so in that sense if

97
00:11:23,820 --> 00:11:30,960
I want that a Comunidad de Madrid picture being clearly so much smaller than it is

98
00:11:30,960 --> 00:11:37,620
I can change it by adding in this case after the image these attributes and

99
00:11:37,620 --> 00:11:43,080
that's exactly what I'm going to do I'm going to copy those attributes and I'm

100
00:11:43,080 --> 00:11:52,500
going to paste them after the image source that's it here I'm going to add

101
00:11:52,500 --> 00:12:00,080
it there and now I'm going to start first I'm going to determine if this

102
00:12:00,240 --> 00:12:07,360
dimension if these dimensions are the ones that i wish for it's going to be probably even worse

103
00:12:07,360 --> 00:12:15,440
than it was before so i'm going to change those i'm going to make those so much smaller 250

104
00:12:16,960 --> 00:12:26,159
by i don't know 250 so something squared again save it and that's so much smaller

105
00:12:26,159 --> 00:12:32,399
and yet as you can see it's a little bit stretched so i'm going to change the width to 200 instead of

106
00:12:32,399 --> 00:12:44,000
250 and save it and refresh so that starts being a little bit better nice now let's dive into

107
00:12:44,000 --> 00:12:51,440
coloring which is so important right now in the tutorial we are dealing with html attributes

108
00:12:51,440 --> 00:12:58,480
which is nice which is dandy we're going to jump into directly we're going to jump over headings

109
00:12:59,440 --> 00:13:06,320
we're going to also jump over paragraphs those all are elements that you are welcome to

110
00:13:07,519 --> 00:13:17,200
look by yourself but what i really want you to have a look is now the styles into html styles

111
00:13:17,200 --> 00:13:24,559
and particularly speaking let's get down into background colors this is the one that i want to

112
00:13:25,840 --> 00:13:33,279
deal with so as you can see the background color is inside the body tag that is here this is the

113
00:13:33,279 --> 00:13:43,360
body tag and it is inside these these marks that we are going to insert this particular

114
00:13:43,360 --> 00:13:56,120
code so we're going to copy and we're going to paste it then it's right place

115
00:13:56,120 --> 00:14:10,419
style background color double full stop two points powder blue powder blue is a

116
00:14:10,419 --> 00:14:29,740
A particular type of blue. Let's see how it works. And as you can see, it's a very, very ugly blue. Now it turns out there are a way of coding the color here. It's going to be the following one.

117
00:14:29,740 --> 00:14:35,899
We're going to switch this name for the following code.

118
00:14:35,919 --> 00:14:42,570
We're going to, first of all, insert the hashtag symbol.

119
00:14:45,509 --> 00:14:51,690
We're going to do a space here and Alt-G-R.

120
00:14:51,750 --> 00:14:55,409
We're going to let it, we're going to, to kick it.

121
00:14:55,529 --> 00:15:00,889
We're going to keep on pressing Alt-G-R followed by number three.

122
00:15:00,889 --> 00:15:10,169
here we are and here instead of wonder blue we are going to change it by a six number

123
00:15:11,049 --> 00:15:21,529
uh number that is for instance let's say 50 60 and 70 something like this and we are going to

124
00:15:21,529 --> 00:15:27,129
save it and let's see how this changes so as you can see we have a rather

125
00:15:27,129 --> 00:15:38,870
darker color let's see what happens if instead of 50 60 and 70 we place 99 followed by 99 by 99

126
00:15:38,870 --> 00:15:47,490
let's say save it and again so as you can see it becomes so much clearer every time but it turns

127
00:15:47,490 --> 00:15:56,409
out up from this point on it doesn't become clearer unless of course we start adding instead

128
00:15:56,409 --> 00:16:03,789
of numbers we start adding letters like these for instance double a double a double a let's save it

129
00:16:03,789 --> 00:16:10,789
refresh it oh and it keeps on being so much clearer what happens if we start for instance

130
00:16:10,789 --> 00:16:20,830
instead of six a's we start six b's okay let's say and it's becoming clearer and clearer

131
00:16:20,830 --> 00:16:29,529
till of course an extreme and that limit is f's if we add f f f f by f f that is six f's

132
00:16:29,529 --> 00:16:39,750
it's going to become white as you can see f couldn't it cannot be brighter from this point on

133
00:16:39,750 --> 00:16:49,110
that is we are using what is called an hexadecimal color here of course if we start mixing those for

134
00:16:49,110 --> 00:16:57,190
since instead of ff i'm going to insert for instance two zeros here let's see what happens

135
00:16:57,830 --> 00:17:06,069
i'm going to save it and well it turns out it changes the color entirely what if we change

136
00:17:06,069 --> 00:17:17,269
those two f's here in the middle by the final ones two zeros once again save it and then it turns

137
00:17:17,269 --> 00:17:24,869
yellow. Now let me explain in the following video why this is the case and how can we use the

138
00:17:24,869 --> 00:17:34,950
hexadecimal code in order to interact directly with the coloring of our computer. Anyways,

139
00:17:34,950 --> 00:17:41,990
in order to finish this part of the exercise, let us save it, as you can see here, and the only

140
00:17:41,990 --> 00:17:49,609
you need to do is you have to upload this web page you can customize it and

141
00:17:49,609 --> 00:17:58,809
you can put it as personal as you wish and you upload it into the correspondent

142
00:17:58,809 --> 00:18:07,789
task thank you so much for your attention and let's meet in another video