WEBVTT

00:00:07.050 --> 00:00:10.810
In this video we are going to start building our Web sites.

00:00:10.830 --> 00:00:18.000
So since this is our first full project in this course and just to keep our course well structured I'm

00:00:18.000 --> 00:00:25.900
going to go to my desktop and creates a new folder I'm going to call Web sites.

00:00:25.930 --> 00:00:26.400
OK.

00:00:26.460 --> 00:00:33.330
So inside this folder we're going to create a new folder for every four projects we're going to be doing

00:00:33.330 --> 00:00:34.040
later on.

00:00:34.230 --> 00:00:34.610
OK.

00:00:34.740 --> 00:00:44.950
So for our months Web sites we're going to create a folder and I'm going to call it one month's websites

00:00:45.100 --> 00:00:46.060
.

00:00:47.070 --> 00:00:48.030
OK.

00:00:48.890 --> 00:00:50.460
And then.

00:00:50.490 --> 00:00:58.810
ASML and CSSA since we're going to be practicing a smile as he says building these websites.

00:00:59.640 --> 00:01:06.640
So we're going to open this folder using brackets.

00:01:11.230 --> 00:01:13.670
OK.

00:01:15.730 --> 00:01:26.030
And then I'm going to create a new ASML file for our web sites and Colette's index those.

00:01:26.060 --> 00:01:28.230
Ha.

00:01:29.790 --> 00:01:30.870
All right.

00:01:31.350 --> 00:01:34.860
So now we are ready to create our page from scratch.

00:01:35.060 --> 00:01:36.650
Okay.

00:01:36.820 --> 00:01:45.060
And just for clarity I'm going to be writing code in full with OK so that we have proper indentation

00:01:45.090 --> 00:01:45.760
and everything.

00:01:45.960 --> 00:01:49.440
So when we're going to do I'm just going to scale this

00:01:52.440 --> 00:02:01.720
so that the top half of my screen is code OK.

00:02:02.580 --> 00:02:06.440
And the other half shows our Web sites

00:02:06.460 --> 00:02:13.020
.

00:02:19.470 --> 00:02:20.050
All right.

00:02:20.220 --> 00:02:22.920
Now let's start building our page from scratch.

00:02:22.920 --> 00:02:30.690
So first of all we are going to define a doctype for our page and we're going to say that to ASML referring

00:02:30.690 --> 00:02:32.710
to a similar life.

00:02:33.000 --> 00:02:41.580
And then we are going to define a simple elements and inside it's we are going to have our head elements

00:02:43.030 --> 00:02:48.700
and then our body and it's OK.

00:02:50.650 --> 00:02:50.970
OK.

00:02:50.970 --> 00:02:55.600
So inside the head Edelman's we're going to place a few meta elements there.

00:02:55.680 --> 00:02:56.280
OK.

00:02:56.280 --> 00:02:59.360
So it starts with the character encoding.

00:03:00.630 --> 00:03:07.090
So you get into the meta tag and then inside that like we can have the attributes character sets and

00:03:07.100 --> 00:03:09.160
it would say that you UTF 8.

00:03:09.530 --> 00:03:12.360
OK the meta is a self enclosing tag.

00:03:12.480 --> 00:03:14.370
So we don't need a closer look.

00:03:14.970 --> 00:03:19.090
And then again I need the title for our sites.

00:03:23.050 --> 00:03:28.640
And let's Khalid's months Web sites you see.

00:03:29.410 --> 00:03:30.400
OK.

00:03:31.410 --> 00:03:35.770
And then we are going to add a viewport meta elements.

00:03:36.060 --> 00:03:38.390
OK.

00:03:38.950 --> 00:03:44.610
So inside the meta side we're going to place a name with the meta elements.

00:03:44.700 --> 00:03:52.160
It's going to be a viewport and then inside the contents attributes we are going to place a few properties

00:03:52.170 --> 00:03:55.230
so first we're going to said the width.

00:03:56.370 --> 00:04:02.150
Ok to the device with.

00:04:04.090 --> 00:04:10.780
OK so the width property is going to control the size of our viewport.

00:04:11.090 --> 00:04:19.880
OK we resetting that to the width of the screen and it's going to be in serious pixels.

00:04:20.490 --> 00:04:22.650
That's a scale of 100 percent.

00:04:23.100 --> 00:04:23.810
All right.

00:04:24.240 --> 00:04:26.560
We can add other properties.

00:04:26.940 --> 00:04:31.680
So let's set the initial scale

00:04:36.090 --> 00:04:37.540
to 1.

00:04:38.100 --> 00:04:43.130
And this means does the initial zoom level of our Web site's going to be one.

00:04:43.260 --> 00:04:44.710
Okay.

00:04:45.900 --> 00:04:55.270
And finally let's allow the user to zoom in and zoom out by setting the user scaleable property to Yes

00:04:55.270 --> 00:04:57.600
.

00:04:58.290 --> 00:05:00.120
OK.

00:05:06.110 --> 00:05:06.740
All right.

00:05:06.770 --> 00:05:12.090
Now let's move to the body element of our page and place the same old components in there.

00:05:12.130 --> 00:05:19.880
So if we have a quick look at our page we will notice that all the components they are placed inside

00:05:19.970 --> 00:05:22.100
some kind of a container.

00:05:22.800 --> 00:05:23.740
OK.

00:05:24.560 --> 00:05:31.710
And this container is censored in the page and it's called some left hand side and right hand side margins

00:05:31.710 --> 00:05:32.400
.

00:05:32.440 --> 00:05:33.240
OK.

00:05:33.680 --> 00:05:39.440
So we're going to start by creating this container and then we are going to move to the same components

00:05:39.650 --> 00:05:41.050
inside us.

00:05:41.360 --> 00:05:44.780
So all we can say that is going to be a Dave

00:05:48.380 --> 00:05:52.910
and let's give it an ID container.

00:05:53.750 --> 00:05:54.430
OK.

00:05:54.480 --> 00:05:59.540
And now we are going to style ours a container so that it's centered in the page and is called Some

00:05:59.540 --> 00:06:02.370
left hand side and right on the side margin.

00:06:02.380 --> 00:06:09.200
So we've got a couple of ways to do this so we can either create a style elements inside the head elements

00:06:09.410 --> 00:06:10.390
like we did before.

00:06:10.510 --> 00:06:11.920
And so I was doing I was tiling.

00:06:12.110 --> 00:06:16.920
Otherwise I'm going to choose the external CSSA for this example.

00:06:17.000 --> 00:06:18.970
I'm going to create a siestas file.

00:06:19.160 --> 00:06:19.920
OK.

00:06:20.310 --> 00:06:23.420
And then inside this file we are going to place all our styling.

00:06:23.540 --> 00:06:29.980
OK so let's go for this way of doing so I'm going to create a new file and call it.

00:06:30.370 --> 00:06:39.550
See I says OK now we need to link our index of a simple page to this CSSA file using a link elements

00:06:39.560 --> 00:06:42.590
inside the head elements.

00:06:42.680 --> 00:06:49.890
OK so we need to give it a relation ship of StarLink sheets.

00:06:50.250 --> 00:06:55.690
And also we need Schrift for this to link it to our tiny SS file.

00:06:55.980 --> 00:06:57.370
OK.

00:06:57.800 --> 00:07:01.790
Now we can add styling inside this styling file.

00:07:02.200 --> 00:07:02.640
OK.

00:07:02.870 --> 00:07:06.880
So we can go ahead and style our container div.

00:07:07.040 --> 00:07:12.370
So since we are using the ID is going to be number sign followed by the idea of our elements which is

00:07:12.380 --> 00:07:16.950
container and then inside curly brackets we're going to have all our styling.

00:07:17.200 --> 00:07:17.730
OK.

00:07:17.840 --> 00:07:22.120
There is another way of doing this since we're using brackets.

00:07:22.220 --> 00:07:24.890
We can just go to the contain the elements.

00:07:25.020 --> 00:07:34.820
OK I'd place our code on the ID attributes and then by clicking on control e you will see a new window

00:07:34.820 --> 00:07:35.700
appearing that.

00:07:35.990 --> 00:07:39.710
OK this is the window corresponding to these elements.

00:07:39.800 --> 00:07:40.190
OK.

00:07:40.190 --> 00:07:41.700
All the ID container.

00:07:41.870 --> 00:07:47.480
So we don't have any rule at the moment but if we click on your rule then it's going to create a new

00:07:47.480 --> 00:07:47.780
line.

00:07:47.810 --> 00:07:50.870
And our STARTING mostly as a file and we can Chicot's.

00:07:51.070 --> 00:07:52.110
So we go on your line.

00:07:52.180 --> 00:07:52.710
OK.

00:07:52.790 --> 00:07:56.570
And we can style our elements using this window.

00:07:56.580 --> 00:08:02.230
OK so let's add some styling.

00:08:02.260 --> 00:08:04.720
So let's start with the with.

00:08:05.820 --> 00:08:06.730
OK.

00:08:06.790 --> 00:08:14.100
And first of all just have our life review for the page we are building.

00:08:14.220 --> 00:08:16.090
So at the moment we have a blank page.

00:08:16.160 --> 00:08:16.970
OK.

00:08:17.210 --> 00:08:24.780
So we want the width of our container elements to be when it's go for 800 pixels.

00:08:24.880 --> 00:08:26.370
That's how it looks like.

00:08:27.000 --> 00:08:28.100
OK.

00:08:28.620 --> 00:08:32.610
Because we're not going to see it's because we don't have any elements inside.

00:08:32.620 --> 00:08:35.580
And also we didn't have any borders with any background color.

00:08:35.810 --> 00:08:41.120
So let's give it some back some boda styling.

00:08:41.620 --> 00:08:47.930
Let's give it a with of one pixel and a solid style.

00:08:47.940 --> 00:08:51.490
OK I'll give you some great color.

00:08:51.830 --> 00:08:52.640
OK.

00:08:53.120 --> 00:08:54.830
So now we can see our container there.

00:08:55.150 --> 00:09:01.000
So it's doesn't have any height at the moment because there are no elements inside.

00:09:01.170 --> 00:09:07.010
But we can try to give a height so that we can see it's this gives a height of 100 pixels and does our

00:09:07.000 --> 00:09:07.710
container.

00:09:07.880 --> 00:09:11.930
So he wants a container to be in the center of the page.

00:09:12.320 --> 00:09:18.350
So there is a nice way of doing that is by using the margin attributes.

00:09:18.490 --> 00:09:19.330
OK.

00:09:19.430 --> 00:09:21.590
All the emergent properties so.

00:09:22.460 --> 00:09:30.230
So we can give it's zero for the top side and the bottom side and for the left hand side on the right

00:09:30.230 --> 00:09:33.100
hand side we're going to go for otos so that it's censored.

00:09:33.400 --> 00:09:38.450
And now we can see that our conceit now is censored in the page.

00:09:38.570 --> 00:09:39.260
OK.

00:09:39.500 --> 00:09:41.680
So you want to contain it to be this big.

00:09:41.960 --> 00:09:44.750
OK so it looks like a set of big cells isn't enough.

00:09:44.780 --> 00:09:47.760
So let's increase it go for 1000

00:09:53.480 --> 00:10:00.070
see the more 1050.

00:10:01.310 --> 00:10:02.740
OK.

00:10:03.580 --> 00:10:03.930
OK.

00:10:04.030 --> 00:10:07.920
So we got to leave our container now with this tiling.

00:10:08.120 --> 00:10:09.410
OK.

00:10:09.650 --> 00:10:09.920
All right.

00:10:09.920 --> 00:10:14.890
Now it is going inside our container and build a header for our web sites.

00:10:15.020 --> 00:10:21.610
So the head is going to consist of a title or brand for the Web sites and also a search box.

00:10:21.680 --> 00:10:26.850
So click on escape to close the window.

00:10:27.670 --> 00:10:28.630
OK.

00:10:28.910 --> 00:10:31.970
So let's create a header.

00:10:31.980 --> 00:10:37.320
So it's going to be a div and we're going to give it an ID header.

00:10:38.090 --> 00:10:40.240
OK.

00:10:40.520 --> 00:10:43.360
And inside the head the size with the title.

00:10:43.640 --> 00:10:45.790
So our title is going to be a link.

00:10:45.860 --> 00:10:52.440
OK but let's place this inside a div because you're going to need to position this later on.

00:10:52.550 --> 00:10:54.800
So it's easy use a div for this.

00:10:54.980 --> 00:10:55.750
OK.

00:10:56.270 --> 00:11:02.930
And I'm going to give it an ID title or rund.

00:11:03.770 --> 00:11:04.900
OK.

00:11:05.800 --> 00:11:08.650
And now we can place our link in there

00:11:13.220 --> 00:11:21.370
and it's quite some text that months the fun we get.

00:11:23.090 --> 00:11:29.830
So we can give our link in a Tref if you want to

00:11:33.290 --> 00:11:39.920
or it's common practice to place the brand link or text inside a heading.

00:11:40.070 --> 00:11:40.280
OK.

00:11:40.280 --> 00:11:44.470
So let's do that before adding any styling to our link.

00:11:45.810 --> 00:11:46.950
OK.

00:11:47.210 --> 00:11:52.250
All right so now we are ready to start styling our links so that it looks like this.

00:11:52.810 --> 00:11:53.540
OK.

00:11:54.080 --> 00:12:00.200
So to do that let's go to the styling sheets.

00:12:00.380 --> 00:12:02.700
And then you were lying there.

00:12:02.950 --> 00:12:03.560
OK.

00:12:03.650 --> 00:12:11.160
So this time we are going to access the links inside headings h ones.

00:12:11.270 --> 00:12:12.180
OK.

00:12:12.440 --> 00:12:15.660
So who's going to be H-1 space anchor.

00:12:15.670 --> 00:12:17.720
OK.

00:12:17.990 --> 00:12:20.510
And have curly brackets.

00:12:20.510 --> 00:12:21.990
We're going to place our side.

00:12:22.550 --> 00:12:26.000
So first of all let's change the font size

00:12:31.160 --> 00:12:33.770
to what the big cells for example

00:12:37.150 --> 00:12:39.990
is.

00:12:41.260 --> 00:12:43.060
That looks OK.

00:12:43.160 --> 00:12:47.390
And also let's change the font.

00:12:47.430 --> 00:12:48.890
Wait

00:12:55.040 --> 00:12:57.960
let's try 100.

00:12:59.530 --> 00:13:00.980
That is OK.

00:13:01.340 --> 00:13:02.510
All right.

00:13:02.510 --> 00:13:09.430
Now let's change the color so we're going to go for the same purple color we see here.

00:13:09.440 --> 00:13:15.230
So let's use our colors either for this.

00:13:19.700 --> 00:13:21.570
OK.

00:13:22.170 --> 00:13:26.200
Color is complete clipboard now and then we can see it.

00:13:26.500 --> 00:13:28.120
OK.

00:13:28.940 --> 00:13:35.670
And now let's change the text decoration of our link.

00:13:35.870 --> 00:13:36.570
OK.

00:13:36.740 --> 00:13:39.210
So we don't want it to be underlined.

00:13:39.380 --> 00:13:44.050
To do that is going to use text decoration.

00:13:45.240 --> 00:13:47.170
None are going to say that to none.

00:13:47.470 --> 00:13:48.070
OK.

00:13:48.410 --> 00:13:54.950
And then you can see this our link is notes and the like.

00:13:57.410 --> 00:13:58.160
All right.

00:13:58.160 --> 00:14:00.380
Now let's move to our search box.

00:14:00.590 --> 00:14:08.540
The search box is going to be a div where we're going to place a form consisting of a text inputs and

00:14:08.570 --> 00:14:11.120
a submit button.

00:14:11.210 --> 00:14:18.720
So if we go to our investors a shame and file and just following the brand div inside the head we're

00:14:18.850 --> 00:14:21.240
going to create another day.

00:14:22.430 --> 00:14:27.540
OK now we're going to give you an ID search box.

00:14:28.730 --> 00:14:30.360
OK.

00:14:30.380 --> 00:14:35.990
And let's place a form inside today.

00:14:37.360 --> 00:14:38.330
OK.

00:14:38.370 --> 00:14:42.800
And our form is going to have a method of gets

00:14:47.520 --> 00:14:50.550
saved by using the guess method.

00:14:50.810 --> 00:14:59.090
If we make the form functional using BHB the address bar is going to show the inputs inside the form

00:14:59.100 --> 00:14:59.250
.

00:14:59.390 --> 00:15:00.640
OK.

00:15:01.490 --> 00:15:01.760
All right.

00:15:01.760 --> 00:15:10.750
So inside silo form we can create a first input which is going to be of type text.

00:15:11.360 --> 00:15:12.430
OK.

00:15:13.110 --> 00:15:17.000
And we're going to give it a close text.

00:15:17.080 --> 00:15:24.260
They're going to use to style these inputs and we're going to create another inputs for the subjects

00:15:24.370 --> 00:15:24.740
.

00:15:25.050 --> 00:15:27.630
And this time it's going to be of type summits.

00:15:27.970 --> 00:15:28.730
OK.

00:15:29.180 --> 00:15:31.160
And we're going to give it a value

00:15:34.670 --> 00:15:37.870
of search a topic.

00:15:37.970 --> 00:15:41.900
OK.

00:15:44.590 --> 00:15:46.940
And you can see our form there.

00:15:47.280 --> 00:15:47.530
OK

00:15:47.530 --> 00:15:53.720
.

00:15:53.720 --> 00:16:01.130
So the search box actually is still inside the container div but the reason why we see this is because

00:16:01.160 --> 00:16:04.790
we gave a heights for our container.

00:16:05.660 --> 00:16:10.820
So if we take that out there we can see everything inside the container.

00:16:10.820 --> 00:16:13.700
Now let's start styling our search box.

00:16:13.730 --> 00:16:18.960
So first of all we want the search box to float to the right of the header.

00:16:19.160 --> 00:16:20.690
Ok so

00:16:24.080 --> 00:16:26.570
let's select our search box using its ID

00:16:28.440 --> 00:16:32.100
.

00:16:32.340 --> 00:16:40.220
I'm going to use the floats property that we can to set to right now our search box should flow to the

00:16:40.220 --> 00:16:40.960
right.

00:16:41.330 --> 00:16:42.790
OK.

00:16:42.800 --> 00:16:50.090
So our search box now is floating to the right but there is an issue we've called a line break there

00:16:50.190 --> 00:16:50.600
.

00:16:51.110 --> 00:16:51.610
Right.

00:16:51.600 --> 00:16:53.730
Officer the brunt.

00:16:53.750 --> 00:16:54.430
OK.

00:16:54.770 --> 00:17:00.690
And the reason why is because the ground is a block elements and it's not a floating elements.

00:17:00.890 --> 00:17:06.940
So to fix this we're going to make the brand elements float to the left.

00:17:06.950 --> 00:17:07.370
OK.

00:17:07.610 --> 00:17:16.650
So this creates it selects our brand elements or our title using its ID brand.

00:17:18.830 --> 00:17:23.340
And now we are going to make it float to the left.

00:17:24.390 --> 00:17:30.890
And now we can see our search box at the same level as our brand does.

00:17:31.150 --> 00:17:32.260
OK.

00:17:32.270 --> 00:17:35.270
So this one is pleasing to the left and this one is closing Streitz