Let's now make a first webpage,
a very simple Web gallery where you can apply what you learn about different page elements
and styles using CSS.
The final layout off the pages now shown where you ever buy drinks,
six different images and respective levels opening an individual baj for the image that you
click.
So let's create this page structure with HTML and apply styles to the different elements.
Step by step.
As you see in the patch,
this group of images is central horizontally.
This is the first important trick to apply.
Create the first block element that if container that I will center using CSS Cove and
where the six images off the gallery will be inserted.
Now that I have the container,
I yeah,
the second day with class name gallery that receives each off the six images.
So I repeat six times this dif in my folder,
where I have HTML document I F six image files bitch,
City Landscape,
night silhouette and underwater that I will the final later in the source attribute inside
image tech.
But before adding these images,
I start to create the style for some page elements.
First,
the background color to change this property in the patch.
The procedure is very simple.
I just need to assign to this property value that I define as dark slate grey.
But of course,
you can select another caller that you like.
The next step is defined my container,
that will be very useful to center the page content in disguise.
The images I defined now with off 60% for this container with Boesch background color the
eye with auto value so that I t adjust the content and to center the Steve I used the
marching property with value zero auto and to finish to have some space between the top of
the page and the container.
I use the property margin top with value 60 pixels.
At this moment,
I cannot seem the badge,
my container,
since I said I'd property with auto value,
I know set a fixed value off 500 pixels for this property just to see that discontent
exists and East centrists on the page.
I will now create the style for did Eve Gallery,
where on each line I want to insert to these receiving the images.
So do with off each day of must be less than 50% off the container,
since I still want to create margins to get some spice between thieves.
I then set the value off 47% and for I value fixed off 250 pixels to put the image side by
side.
I use now the float property with left value for spicing between the images.
I created margin with a value off 1% and for a larger vertical spicing,
I insert a bottom margin with 30 pixels to finish.
I assigned the border property to the Deve Gallery with the value off one pixel,
solid line and best color.
I have now my six main blocks that received the six images.
So let's at image files inside Jill Reid Eaves using image stick where I defined the image
name using sauce.
The attribute.
I copied the skulls to the other five gives,
and then I yet file names,
beginning with image bitch for the second image tech.
I have the image landscape served City for image comes from the file seal with,
and the last two I have the images,
night and underwater image styles is now my next step,
where I use do with properties with value 100% to the image to occupy the entire Deve
Gallery and the ICT off to 150 pixels.
Responding to the eye off the Deve my sixties are now.
We'd better look after applying the correct styles.
And now that I have my main container and images,
I add a new TV inside the Div Gallery,
to which I give the class name description that I used to create a libel for each off the
Peters this day is added after each one of the images occupying goal with below.
Since it's a block helmet,
I now Coop,
it is dif to the other five images and right respondent texts Bitch Landscape,
City silhouette night and finally,
and the water.
I now create style for the description.
Def.
Using the property,
text the line with center value to land texts to the center and to give a different format
to my text.
I used three different properties,
the phone family,
where I define the text with the fund career front weight with the valuable and finally
apply the caller white to the text,
using the color property to give more contrasts between the background color and the text.
The final step in this Web gallery is create a link in each one of the photos to open a new
individual page that contains the correspondent image.
To create this April Inc.
I have to put the clickable content into any pearling within the ATEC that will contain the
image static and the description Deve S attributes off the tech.
I used the target with the blank value that opens the length document in the new window or
tab and the Attributes,
a draft that specifies the u.
R L off the baj.
That link goes to being in disguise,
an image file that I want to open and not an HTML document.
I will now copy these same codes to the remaining images,
always changing to file limes off the images to open the correct files.
When I click the link.
Now that I have the full page,
I just air the title at top,
creating a road ive with class name title that is outside the container where I write the
text Web gallery text that appears on the left side of the page,
and now I create the style for this class by censoring the text with the property,
text,
align,
fun family,
verdana and color defined by the exit decimal colds that I right now for the phone size I
use a value off 20 people's and to have some spice between the text and the top off the
page.
I used the margin toe property with value 40 pixels.
Now some final thoughts about CSS code that was used in this Web page.
First,
the margin property defined with value zero to set the top and bottom margins with value
zero and Value Auto Details browser To automatically calculate the left and right margins
itself,
which it does by setting them equally.
What makes that the container stay central or resentfully?
Other important detail is the use off float property with value left,
which allows photos to be side by sides,
and finally,
the use off units in percentages.
That gives a great flexibility to manage the size off the different elements off the page.
For the case of the container,
I initially set a value off 60% so this element occupies 60% off the weed related to its
parent,
the body.
If I change the valley to 80%.
We see that the wheat off the container will increase,
also increasing the week off the deeds that receive each off the images,
since these well occupy 47% off the wheat defined for the container.
This type of units also allows to manage the number of images that appears in each line
being defined at the moment to because I'm using a 47% value,
which causes debt.
Two images,
together with the defined borders and margins,
occupy about 100% off the container wheat,
causing that assert image.
Go to the second line.
If I want three images per line,
I will have to set the week off the Div Gallery toe,
a value slightly less than 33% for each one off.
The images to occupy cools to one cert off the container.
I will then give a value off 31% since we cannot ignore margin and borders and we see that
each line will then after three pictures,
that's all.
For now.
Thanks for watching