1 00:00:00,000 --> 00:00:08,250 Let's now make a first webpage, 2 00:00:08,250 --> 00:00:14,610 a very simple Web gallery where you can apply what you learn about different page elements 3 00:00:14,610 --> 00:00:17,450 and styles using CSS. 4 00:00:17,450 --> 00:00:23,060 The final layout off the pages now shown where you ever buy drinks, 5 00:00:23,060 --> 00:00:31,540 six different images and respective levels opening an individual baj for the image that you 6 00:00:31,540 --> 00:00:32,150 click. 7 00:00:32,150 --> 00:00:42,630 So let's create this page structure with HTML and apply styles to the different elements. 8 00:00:42,630 --> 00:00:43,950 Step by step. 9 00:00:43,950 --> 00:00:48,150 As you see in the patch, 10 00:00:48,150 --> 00:00:51,850 this group of images is central horizontally. 11 00:00:51,850 --> 00:00:57,160 This is the first important trick to apply. 12 00:00:57,160 --> 00:01:04,460 Create the first block element that if container that I will center using CSS Cove and 13 00:01:04,460 --> 00:01:08,480 where the six images off the gallery will be inserted. 14 00:01:08,480 --> 00:01:14,310 Now that I have the container, 15 00:01:14,310 --> 00:01:14,710 I yeah, 16 00:01:14,710 --> 00:01:21,390 the second day with class name gallery that receives each off the six images. 17 00:01:21,390 --> 00:01:31,180 So I repeat six times this dif in my folder, 18 00:01:31,180 --> 00:01:36,650 where I have HTML document I F six image files bitch, 19 00:01:36,650 --> 00:01:39,750 City Landscape, 20 00:01:39,750 --> 00:01:48,950 night silhouette and underwater that I will the final later in the source attribute inside 21 00:01:48,950 --> 00:01:49,950 image tech. 22 00:01:49,950 --> 00:01:55,780 But before adding these images, 23 00:01:55,780 --> 00:01:59,250 I start to create the style for some page elements. 24 00:01:59,250 --> 00:02:00,750 First, 25 00:02:00,750 --> 00:02:05,810 the background color to change this property in the patch. 26 00:02:05,810 --> 00:02:07,950 The procedure is very simple. 27 00:02:07,950 --> 00:02:15,050 I just need to assign to this property value that I define as dark slate grey. 28 00:02:15,050 --> 00:02:16,340 But of course, 29 00:02:16,340 --> 00:02:18,850 you can select another caller that you like. 30 00:02:18,850 --> 00:02:23,650 The next step is defined my container, 31 00:02:23,650 --> 00:02:28,610 that will be very useful to center the page content in disguise. 32 00:02:28,610 --> 00:02:42,630 The images I defined now with off 60% for this container with Boesch background color the 33 00:02:42,630 --> 00:02:50,680 eye with auto value so that I t adjust the content and to center the Steve I used the 34 00:02:50,680 --> 00:02:59,740 marching property with value zero auto and to finish to have some space between the top of 35 00:02:59,740 --> 00:03:01,350 the page and the container. 36 00:03:01,350 --> 00:03:07,150 I use the property margin top with value 60 pixels. 37 00:03:07,150 --> 00:03:11,540 At this moment, 38 00:03:11,540 --> 00:03:12,850 I cannot seem the badge, 39 00:03:12,850 --> 00:03:13,850 my container, 40 00:03:13,850 --> 00:03:17,750 since I said I'd property with auto value, 41 00:03:17,750 --> 00:03:26,290 I know set a fixed value off 500 pixels for this property just to see that discontent 42 00:03:26,290 --> 00:03:29,950 exists and East centrists on the page. 43 00:03:29,950 --> 00:03:37,400 I will now create the style for did Eve Gallery, 44 00:03:37,400 --> 00:03:42,260 where on each line I want to insert to these receiving the images. 45 00:03:42,260 --> 00:03:47,820 So do with off each day of must be less than 50% off the container, 46 00:03:47,820 --> 00:03:53,650 since I still want to create margins to get some spice between thieves. 47 00:03:53,650 --> 00:04:08,980 I then set the value off 47% and for I value fixed off 250 pixels to put the image side by 48 00:04:08,980 --> 00:04:09,580 side. 49 00:04:09,580 --> 00:04:17,500 I use now the float property with left value for spicing between the images. 50 00:04:17,500 --> 00:04:23,770 I created margin with a value off 1% and for a larger vertical spicing, 51 00:04:23,770 --> 00:04:32,900 I insert a bottom margin with 30 pixels to finish. 52 00:04:32,900 --> 00:04:39,460 I assigned the border property to the Deve Gallery with the value off one pixel, 53 00:04:39,460 --> 00:04:43,450 solid line and best color. 54 00:04:43,450 --> 00:04:49,950 I have now my six main blocks that received the six images. 55 00:04:49,950 --> 00:04:59,900 So let's at image files inside Jill Reid Eaves using image stick where I defined the image 56 00:04:59,900 --> 00:05:01,160 name using sauce. 57 00:05:01,160 --> 00:05:02,050 The attribute. 58 00:05:02,050 --> 00:05:06,700 I copied the skulls to the other five gives, 59 00:05:06,700 --> 00:05:11,150 and then I yet file names, 60 00:05:11,150 --> 00:05:26,400 beginning with image bitch for the second image tech. 61 00:05:26,400 --> 00:05:42,900 I have the image landscape served City for image comes from the file seal with, 62 00:05:42,900 --> 00:05:50,900 and the last two I have the images, 63 00:05:50,900 --> 00:06:06,520 night and underwater image styles is now my next step, 64 00:06:06,520 --> 00:06:16,140 where I use do with properties with value 100% to the image to occupy the entire Deve 65 00:06:16,140 --> 00:06:21,340 Gallery and the ICT off to 150 pixels. 66 00:06:21,340 --> 00:06:28,890 Responding to the eye off the Deve my sixties are now. 67 00:06:28,890 --> 00:06:32,350 We'd better look after applying the correct styles. 68 00:06:32,350 --> 00:06:38,920 And now that I have my main container and images, 69 00:06:38,920 --> 00:06:41,840 I add a new TV inside the Div Gallery, 70 00:06:41,840 --> 00:06:47,940 to which I give the class name description that I used to create a libel for each off the 71 00:06:47,940 --> 00:06:57,210 Peters this day is added after each one of the images occupying goal with below. 72 00:06:57,210 --> 00:06:59,370 Since it's a block helmet, 73 00:06:59,370 --> 00:07:01,170 I now Coop, 74 00:07:01,170 --> 00:07:15,950 it is dif to the other five images and right respondent texts Bitch Landscape, 75 00:07:15,950 --> 00:07:31,950 City silhouette night and finally, 76 00:07:31,950 --> 00:07:33,650 and the water. 77 00:07:33,650 --> 00:07:40,420 I now create style for the description. 78 00:07:40,420 --> 00:07:40,880 Def. 79 00:07:40,880 --> 00:07:42,320 Using the property, 80 00:07:42,320 --> 00:07:50,410 text the line with center value to land texts to the center and to give a different format 81 00:07:50,410 --> 00:07:51,400 to my text. 82 00:07:51,400 --> 00:07:54,140 I used three different properties, 83 00:07:54,140 --> 00:07:55,740 the phone family, 84 00:07:55,740 --> 00:08:06,150 where I define the text with the fund career front weight with the valuable and finally 85 00:08:06,150 --> 00:08:09,090 apply the caller white to the text, 86 00:08:09,090 --> 00:08:16,470 using the color property to give more contrasts between the background color and the text. 87 00:08:16,470 --> 00:08:27,570 The final step in this Web gallery is create a link in each one of the photos to open a new 88 00:08:27,570 --> 00:08:31,110 individual page that contains the correspondent image. 89 00:08:31,110 --> 00:08:33,970 To create this April Inc. 90 00:08:33,970 --> 00:08:42,810 I have to put the clickable content into any pearling within the ATEC that will contain the 91 00:08:42,810 --> 00:08:50,650 image static and the description Deve S attributes off the tech. 92 00:08:50,650 --> 00:08:59,450 I used the target with the blank value that opens the length document in the new window or 93 00:08:59,450 --> 00:09:01,900 tab and the Attributes, 94 00:09:01,900 --> 00:09:05,090 a draft that specifies the u. 95 00:09:05,090 --> 00:09:07,000 R L off the baj. 96 00:09:07,000 --> 00:09:10,730 That link goes to being in disguise, 97 00:09:10,730 --> 00:09:16,610 an image file that I want to open and not an HTML document. 98 00:09:16,610 --> 00:09:25,050 I will now copy these same codes to the remaining images, 99 00:09:25,050 --> 00:09:32,990 always changing to file limes off the images to open the correct files. 100 00:09:32,990 --> 00:09:35,450 When I click the link. 101 00:09:35,450 --> 00:09:55,000 Now that I have the full page, 102 00:09:55,000 --> 00:09:57,540 I just air the title at top, 103 00:09:57,540 --> 00:10:05,440 creating a road ive with class name title that is outside the container where I write the 104 00:10:05,440 --> 00:10:11,650 text Web gallery text that appears on the left side of the page, 105 00:10:11,650 --> 00:10:19,190 and now I create the style for this class by censoring the text with the property, 106 00:10:19,190 --> 00:10:19,850 text, 107 00:10:19,850 --> 00:10:20,650 align, 108 00:10:20,650 --> 00:10:22,970 fun family, 109 00:10:22,970 --> 00:10:37,100 verdana and color defined by the exit decimal colds that I right now for the phone size I 110 00:10:37,100 --> 00:10:45,820 use a value off 20 people's and to have some spice between the text and the top off the 111 00:10:45,820 --> 00:10:46,550 page. 112 00:10:46,550 --> 00:10:52,950 I used the margin toe property with value 40 pixels. 113 00:10:52,950 --> 00:11:05,150 Now some final thoughts about CSS code that was used in this Web page. 114 00:11:05,150 --> 00:11:06,230 First, 115 00:11:06,230 --> 00:11:13,590 the margin property defined with value zero to set the top and bottom margins with value 116 00:11:13,590 --> 00:11:22,280 zero and Value Auto Details browser To automatically calculate the left and right margins 117 00:11:22,280 --> 00:11:23,150 itself, 118 00:11:23,150 --> 00:11:27,050 which it does by setting them equally. 119 00:11:27,050 --> 00:11:32,250 What makes that the container stay central or resentfully? 120 00:11:32,250 --> 00:11:40,150 Other important detail is the use off float property with value left, 121 00:11:40,150 --> 00:11:43,220 which allows photos to be side by sides, 122 00:11:43,220 --> 00:11:44,690 and finally, 123 00:11:44,690 --> 00:11:48,340 the use off units in percentages. 124 00:11:48,340 --> 00:11:55,110 That gives a great flexibility to manage the size off the different elements off the page. 125 00:11:55,110 --> 00:11:59,380 For the case of the container, 126 00:11:59,380 --> 00:12:09,700 I initially set a value off 60% so this element occupies 60% off the weed related to its 127 00:12:09,700 --> 00:12:10,220 parent, 128 00:12:10,220 --> 00:12:11,050 the body. 129 00:12:11,050 --> 00:12:15,950 If I change the valley to 80%. 130 00:12:15,950 --> 00:12:19,850 We see that the wheat off the container will increase, 131 00:12:19,850 --> 00:12:25,950 also increasing the week off the deeds that receive each off the images, 132 00:12:25,950 --> 00:12:33,450 since these well occupy 47% off the wheat defined for the container. 133 00:12:33,450 --> 00:12:41,940 This type of units also allows to manage the number of images that appears in each line 134 00:12:41,940 --> 00:12:47,810 being defined at the moment to because I'm using a 47% value, 135 00:12:47,810 --> 00:12:49,730 which causes debt. 136 00:12:49,730 --> 00:12:50,570 Two images, 137 00:12:50,570 --> 00:12:53,850 together with the defined borders and margins, 138 00:12:53,850 --> 00:12:57,650 occupy about 100% off the container wheat, 139 00:12:57,650 --> 00:13:00,490 causing that assert image. 140 00:13:00,490 --> 00:13:02,450 Go to the second line. 141 00:13:02,450 --> 00:13:07,100 If I want three images per line, 142 00:13:07,100 --> 00:13:10,940 I will have to set the week off the Div Gallery toe, 143 00:13:10,940 --> 00:13:16,530 a value slightly less than 33% for each one off. 144 00:13:16,530 --> 00:13:21,500 The images to occupy cools to one cert off the container. 145 00:13:21,500 --> 00:13:32,770 I will then give a value off 31% since we cannot ignore margin and borders and we see that 146 00:13:32,770 --> 00:13:36,350 each line will then after three pictures, 147 00:13:36,350 --> 00:13:39,630 that's all. 148 00:13:39,630 --> 00:13:40,360 For now. 149 00:13:40,360 --> 00:13:41,650 Thanks for watching