Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

Nuestra primera web personal - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 15 de octubre de 2023 por Fernando B.

41 visualizaciones

Cómo realizar una web personal muy muy sencilla empleando exclusivamente editor de textos.

Más información Transcripción

Descargar la transcripción

we're going to start this exercise by creating a new file right click on the desktop create a 00:00:00
document new file we're going to change the name with our own name followed by point html this is 00:00:07
absolutely key otherwise we are not going to be able to start working with a web browser 00:00:18
now we're going to open this file with 00:00:24
editor de texto se cite, abrir con, again 00:00:28
this one, this site, cite, or however this is spelled in English 00:00:32
I don't know, editor, there we go 00:00:36
right now it's totally blank, it's white, so we haven't 00:00:39
edited yet, and we haven't introduced any content 00:00:44
in order to do so, following the right structure, we're going to open 00:00:47
our web browser doesn't matter which one firefox or whatever and we're going to write down w3 00:00:52
schools okay schools that's the one that we're going to search for this is one of the results 00:00:59
that we're going to get the first one is going to be good enough we go directly into html tutorial 00:01:08
like this now the main important thing is we go directly into the next step of it here we have a 00:01:14
complete example of the structure of a web page and this is the one that we are going to copy 00:01:29
there you can see copy and we're going to paste it now we're going to save it 00:01:38
nice now we are going to minimize this one and we're going to do double click 00:01:45
on our web page the one that we are working with so as you can see we have 00:01:54
the same file only opened with two different programs and this one we're 00:01:59
going to edit the contents in this one we are going to see the result we're 00:02:05
going to do ctrl view we're going to zoom in we're going to zoom in in order 00:02:11
to have a wider view of our web page and we're going to start editing some of the 00:02:16
contents for instance here in title page title which you can see here is in the 00:02:22
other part of the ribbon we're going to change and we're going to write it down 00:02:27
personal web page this shouldn't be very long is that so since of course it's going to be part 00:02:34
of that ribbon we're going to save it and now here we're going to refresh and as you can see 00:02:42
we already have been able to insert our content into the title of the ribbon this same 00:02:51
text is going to be copied and we are going to paste it in between these both tags h1 00:02:59
it opens here and it closes there as you can see with a slash 7 we're going to paste it 00:03:08
we're going to save it we're going to refresh and again as you can see the one text that is 00:03:16
in between these both tags means that this is the main title and it's bold and has a bigger 00:03:23
font type here in my first paragraph is the one part of the main body that is this is going to 00:03:34
be the main text here you can write whatever you want to but just in case if you feel you don't 00:03:43
have enough imagination in order to write down your full name, then you can use always the 00:03:50
following trick in order to do a mock-up. A mock-up is a text simulation and we're going 00:03:58
to write down lorem ipsum. Lorem ipsum is a Latin text that is going to allow us, for instance, 00:04:06
this one here to create random text as this one here let's say let's create for 00:04:17
instance here how many paragraphs let's create for instance just one single 00:04:30
paragraph we don't need more than that and we create it and here we have it so 00:04:36
it's a lot of text that nobody's going to understand and it's not going to 00:04:42
hurt the feelings of of anyone anyways now this is the one that we are going to 00:04:47
paste it here we have it paste good let's see how this works save it and we 00:04:52
go back into our web page and we as you can see it's perfectly done here we have 00:05:01
the main text nice so this would be the main structure of a web page let's go 00:05:07
ahead and go on we're going upwards in our tutorial and we're going next we're going to 00:05:14
skip the thing about the editors since we already know we're using editors we go into the next one 00:05:24
we also are going to skip basic examples and we go directly into attributes which is not this one 00:05:30
here here in elements they do explain something we already know which is the 00:05:39
age tags the higher the number the smaller that title is going to be so we 00:05:44
go onwards and here here is the one thing we are going to start copying and 00:05:56
pasting so here as you can see is the the main tag for introducing links this 00:06:00
is the one that we are going to copy and we are going to paste it in between the 00:06:08
main title and the paragraph, for instance like this. We're going to zoom 00:06:15
out a little bit in order to have a wider scope of the structure and we're 00:06:22
going to save it and again here we have to be careful what we have opened 00:06:29
already and whatnot we're going to refresh and here we have our first introduced link as you 00:06:35
can see it's directly linking into well the w three schools so on so forth so this is going 00:06:44
to be changed first of all we're going to need to determine the web page that we are going to 00:06:52
place here as our link. And we're going to use Aula Virtual. Aula Virtual EducaMadrid. 00:07:01
So we're going to save it, we're going to refresh it, and as you can see we will change that text, 00:07:12
but we haven't changed the the direction, the address. If we do click on it, as you can see, 00:07:18
it goes directly into the tutorial and we don't want that so we go backwards 00:07:26
and we're going to change so since i don't remember exactly 00:07:32
the link of aula virtual i'm going to first of all going to educa madrid 00:07:36
nothing new about this and here we have the aula virtual doing 00:07:43
so we're going to copy that one the address and here 00:07:48
you will have to be very very careful and just select the text that is in between 00:07:54
the quotation marks so let's paste it there we go and this should do the trick let's see if that's 00:08:03
right first of all let's refresh it here we go as you can see the text doesn't change at all 00:08:12
but if we do click on it it goes directly into the aula virtual which is good 00:08:18
which is so dandy. Let's go ahead. 00:08:24
Next step. 00:08:28
The source attribute. The source attribute is going to allow us to paste 00:08:31
images. So let's determine 00:08:37
in our example where we want to place 00:08:41
the image. For instance, in my case I'm going to put it 00:08:45
even before the link. I'm going to start with the 00:08:49
image there on the upper part of my web page 00:08:53
so that means i'm going to copy the code so i don't need to to write it down so i 00:08:56
won't make any mistakes 00:09:03
and now i have to of course search for a link of an image that 00:09:08
makes this this image available so again 00:09:15
so this is what we're going to do we're going to search for Comunidad de Madrid 00:09:22
that's it and images Comunidad de Madrid and we're going to search for a free one 00:09:32
or Creative Commons one which should be very easy to find for instance this one here of the 00:09:44
wikipedia this this one here it's going to be good enough so let's uh save let's copy 00:09:49
not the image but the direction the address of the image this is the one thing that we need to 00:09:58
we copy that one and we placed it we place it precisely in between the quotation marks 00:10:05
like that i hope this is going to be good enough it's rather long as you can see but i hope it 00:10:13
works fine so we're going to save it again let's go back here and refresh it and here we have it 00:10:21
but as you can see i've placed my image above the title that's not what i wanted so i'm going to 00:10:31
change this location I'm going to cut it instead of copying control X would have 00:10:41
been also the the shortcut and let's save it again and let's see how this 00:10:50
works now now it's in between as you can see but you know that and so on so forth 00:10:58
good let's go ahead after the source attribute we will also be able to change 00:11:05
the width and the height of our images as you can see here so in that sense if 00:11:16
I want that a Comunidad de Madrid picture being clearly so much smaller than it is 00:11:23
I can change it by adding in this case after the image these attributes and 00:11:30
that's exactly what I'm going to do I'm going to copy those attributes and I'm 00:11:37
going to paste them after the image source that's it here I'm going to add 00:11:43
it there and now I'm going to start first I'm going to determine if this 00:11:52
dimension if these dimensions are the ones that i wish for it's going to be probably even worse 00:12:00
than it was before so i'm going to change those i'm going to make those so much smaller 250 00:12:07
by i don't know 250 so something squared again save it and that's so much smaller 00:12:16
and yet as you can see it's a little bit stretched so i'm going to change the width to 200 instead of 00:12:26
250 and save it and refresh so that starts being a little bit better nice now let's dive into 00:12:32
coloring which is so important right now in the tutorial we are dealing with html attributes 00:12:44
which is nice which is dandy we're going to jump into directly we're going to jump over headings 00:12:51
we're going to also jump over paragraphs those all are elements that you are welcome to 00:12:59
look by yourself but what i really want you to have a look is now the styles into html styles 00:13:07
and particularly speaking let's get down into background colors this is the one that i want to 00:13:17
deal with so as you can see the background color is inside the body tag that is here this is the 00:13:25
body tag and it is inside these these marks that we are going to insert this particular 00:13:33
code so we're going to copy and we're going to paste it then it's right place 00:13:43
style background color double full stop two points powder blue powder blue is a 00:13:56
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. 00:14:10
We're going to switch this name for the following code. 00:14:29
We're going to, first of all, insert the hashtag symbol. 00:14:35
We're going to do a space here and Alt-G-R. 00:14:45
We're going to let it, we're going to, to kick it. 00:14:51
We're going to keep on pressing Alt-G-R followed by number three. 00:14:55
here we are and here instead of wonder blue we are going to change it by a six number 00:15:00
uh number that is for instance let's say 50 60 and 70 something like this and we are going to 00:15:11
save it and let's see how this changes so as you can see we have a rather 00:15:21
darker color let's see what happens if instead of 50 60 and 70 we place 99 followed by 99 by 99 00:15:27
let's say save it and again so as you can see it becomes so much clearer every time but it turns 00:15:38
out up from this point on it doesn't become clearer unless of course we start adding instead 00:15:47
of numbers we start adding letters like these for instance double a double a double a let's save it 00:15:56
refresh it oh and it keeps on being so much clearer what happens if we start for instance 00:16:03
instead of six a's we start six b's okay let's say and it's becoming clearer and clearer 00:16:10
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 00:16:20
it's going to become white as you can see f couldn't it cannot be brighter from this point on 00:16:29
that is we are using what is called an hexadecimal color here of course if we start mixing those for 00:16:39
since instead of ff i'm going to insert for instance two zeros here let's see what happens 00:16:49
i'm going to save it and well it turns out it changes the color entirely what if we change 00:16:57
those two f's here in the middle by the final ones two zeros once again save it and then it turns 00:17:06
yellow. Now let me explain in the following video why this is the case and how can we use the 00:17:17
hexadecimal code in order to interact directly with the coloring of our computer. Anyways, 00:17:24
in order to finish this part of the exercise, let us save it, as you can see here, and the only 00:17:34
you need to do is you have to upload this web page you can customize it and 00:17:41
you can put it as personal as you wish and you upload it into the correspondent 00:17:49
task thank you so much for your attention and let's meet in another video 00:17:58
Idioma/s:
es
Autor/es:
Fernando Briones
Subido por:
Fernando B.
Licencia:
Dominio público
Visualizaciones:
41
Fecha:
15 de octubre de 2023 - 19:19
Visibilidad:
Público
Centro:
IES ALFREDO KRAUS
Duración:
18′ 06″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
429.71 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid