HTML and CSS Web Development Masterclass - Create your First Website | Luis Carlos | Skillshare

HTML and CSS Web Development Masterclass - Create your First Website

Luis Carlos, Engineer, Web Developer and Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
39 Lessons (2h 56m)
    • 1. Trailer

      1:40
    • 2. Introduction

      1:10
    • 3. Code Editor

      1:46
    • 4. HTML Structure

      2:24
    • 5. Main HTML Elements

      1:39
    • 6. HTML Attributes

      1:42
    • 7. Create Page Title and Heading

      3:05
    • 8. Insert your First Paragraphs

      3:13
    • 9. Text Formatting

      4:34
    • 10. Insert Images

      2:23
    • 11. HTML Lists

      2:18
    • 12. Create Hyperlinks

      4:46
    • 13. Tables

      2:52
    • 14. Insert Comments

      1:43
    • 15. HTML Styles

      2:58
    • 16. HTML Forms I

      5:43
    • 17. HTML Forms II

      2:59
    • 18. Introduction to Multimedia Content

      0:48
    • 19. Insert Videos in a Webpage

      2:57
    • 20. Insert Audio - HTML5

      2:02
    • 21. Object Tag

      1:40
    • 22. Insert Interactive Content using Embed Tag - HTML5

      1:25
    • 23. Insert Youtube Videos

      3:13
    • 24. Create an youtube playlist

      2:54
    • 25. Introduction to CSS

      1:48
    • 26. CSS syntax

      3:16
    • 27. Class and Id Selectors

      6:35
    • 28. How to add CSS Styles

      8:27
    • 29. Box model - Border, Margin and Padding properties

      8:25
    • 30. CSS Font Properties

      6:51
    • 31. Text Properties

      5:04
    • 32. Block & Inline Elements (Div and Span elements)

      5:42
    • 33. Width and Height Properties

      5:23
    • 34. Position Property

      9:47
    • 35. Float and Clear properties

      7:02
    • 36. Relative and Absolute Units

      14:56
    • 37. Project #1 - Create a Web Gallery with HTML & CSS

      13:44
    • 38. Project #2 - Webpage Form

      16:49
    • 39. Congratulations

      0:19
15 students are watching this class

About This Class


HTML and CSS Web Development Masterclass
 is a Introductory course to Web development where i explain to you the main concepts of HTML language and relation with CSS, that leads you to perfect websites ()

 HTML is a power language that will help you develop mobile application,  websites, and work with other languages like JavaScript or PHP that allow you to create dinamic pages.  

B3fTBjg.jpg

Why join this course?

This course will help to learn the basics of HTML, HTML5 and CSS, and is intended for users who have little or no knowledge of HTML and who wish to acquire the basic concepts of this language.

Having a good understanding of HTML is one of the main keys to develop websites content, and in this short course you will learn the basics of the language.

After completing this class you are able to create a static content page for in the future deepen your knowledge of HTML as well as learn the first concepts of CSS.

At the end feel free to leave a comment!

Good Luck!! 

What you will learn in this class: 

  • Choice of code editor

  • HTML document structure
  • HTML(5) elements and attributes

  • Paragraph creation and text formatting

  • Insert comments

  • Creation of tables and lists to display data in differents formats

  • Hyperlinks to connect to other pages  and "jump" to internal page contents

  • Creation of Forms

  • Use of images and multimedia a webpage (video and audio)

  • Create a Youtube playlist

  • Understand use of CSS to style pages

  • Basic CSS syntax

  • Use of CSS box model and some CSS properties to style your webpage

  • Use of Classes and Id selectors

  • Understand importance and how box model works

  • Define Block and Inline Elements

  • Position Elements in different points of the page to create a layout structure

  • Width and Height properties

  • Position property

  • Float and Clear properties

  • Relative and absolute Units

  • #Project - Web Gallery Creation
  • #Project - Webpage Form

 

What is the target audience?

  • This course is intended for beginners in the world of technology  and web development



If you want to learn more in the web development area, you can watch my other courses:

Transcripts

1. Trailer: I welcome to the HTML and CSS kers. We're real life into the world. Off Web development My name is Wish College. I'm a Web developer and instructor, and that will be our guide in the next few hours. Indus Class You will learn HTML language That is the basic structural elements used to create Web pages and CSS to style pH content, leading you to a perfectly out and design. You will learn out degree HTML and CSS gold in a simple, efficient and funny way. Discursive is divided into models where you learn in the first. All basic elements used in a weapons are presented as well. The advance. Once that allow you to take her website to another level in the second module, I'll teach you the syntax and properties off CSS language, which improve your website design. At the end of discuss, you will be an HTML and CSS experts being able to build your own websites without complications in rural mountain and enjoy 2. Introduction: the world of Internet and its growth. Bring us a series of new challenges and possibilities like create your online business, generates multimedia contents, use off social media applications and other kind of services to create online contents. We used the website by his language HTML, that is defined S a protects markup language used to static where page contents this language is used to describe the structure off webpages using markup. HTML is the language that allow you to represent many different contents. The language as elements represented by techs that are used to create contents like Vera Griff's tables, images, paper links and so one. In the next videos, you will learn out to create some of these contents in your website. 3. Code Editor: L O students after you learn in first class utility off veg Daniel language. I introduce now the software used to writing goat for several languages, including HTML. The program used his brackets and intelligent and modern open source, where you can write your cold faster by recognizing automatically different cult elements and use the life purview to in the right and column, which allow you to open with a mouse. Click the browser using this Aiken on the right panel off the application. The left and column lists the working files, and beneath there is a folder view. In this last fuller. You can view a file with one click without actually open it. A double click opens the file for editing, adding it to the working files list To install. You have to go to this website briquettes dot io and click download brackets. To start download off in stel file, you need to follow instructions that are very easy. In about two minutes, you F brackets in stealth. The last step is to go to your programs and select brackets to start application. You are now able to start writing HTML code. See you next. Video students 4. HTML Structure: The main goal of this class is to learn the basic structure, often. HTML document. Before starting, I'm going to create a new waged email file to use for the way page deaths I want to create . I go to men a file, select new and safe in folder files with name, home and extension HTML. Like I said before an HTML file as different types of contents reason why we used X to distinguish between them. The main structure. Oven html documents as a Siris of tax that are common to all documents I will right now in the Created filed the decks that make parts off that structure. First, HTML must start with the document type declaration duck type HTML. This declaration defines death. This document is complying with version five off html. The HTML documents begins now with deck HTML, and we'd slash html at the bottom off the document that is the root element, often html page. Next. The element is the first element to appear after the opening HTML tag. In the document at we placed things like the page title Using title tech, we add JavaScript to our patch with script, tech, end link to external style sheets and other resource is finally the visible part off the documents. Where do we write great part off our coat. This part off the HTML document is between the start and end body tag We have now. Do my instructor off. Our document defined You are now ready to create the contents on your web page. 5. Main HTML Elements: welcome again to this new video. Now that document structure is defined. Let's see, what are the elements in an HTML file? Like I said in the introduction HTML as elements represented by tags an HTML elements usually consists off startek and an Antec with the content inserted between them. Detect name specified. A certain type of content that can be an adding image peril, ref tables least cease and other kinds of contents. When you use the software and write the less than signal you can see, that's appear a lot of text that you can use when you write one debt, it automatically creates the ending deck like you see when I create the documents structure . In this example situation. I wrote a paragraph tag starting and ending tech, and now I write tech table that is used to create tables in HTML. Now that you know to use text to create different contents, let's move to the next level. Do not miss the next video, where you will learn what are elements, attributes and their importance 6. HTML Attributes: the HTML elements. As you saw before I represented by Tex. Each element can have one arm are attributes a net roots provide additional information about an element. They are always specified in the startek and usually come with a tribute name and correspondent value. I'm going to open now. Detect that is used for images. E m g tec. If you remember, I said in the HTML Elements video that usually startek as a corresponding ending tech. The image tech is one off the text that don't follow this rule. Just having a starting dick returning now to the image tech in the least off attributes I'm going to show to first Do with Death receives a number that specifies the with off the image, and the other is the I've that receives the I've off the image inserted with these two attributes. You always can change the image size in your webpage. This is just two attributes. Death. An image element can f when we add images in the future videos, you can see more attributes for this element 7. Create Page Title and Heading: Hello again and congratulations for reach at. Despite of the curse, you will learn in the best lessons the difference convince and text that you can use in HTML. Now it's time to build a website. The main goal to the next lessons is to create text and images, contents into pages, off website and F paper links to navigate between them. The team I'm going to develop is an agency travel where I'm going to describe and always a destination. The first change that I'm going to do in the page is the title debt appears on the top, changing the content off title tech to travel with us. Now I'm going to write my topic using the adding tech. Html. Eddings provide valuable information by highlighting important topics and to understand documents structure. Other great advantage is death search engines use, adding as an indicator of what text is most important on a page. If you have to eat an integral pages, the one using Eddings should appear above that one. Death hasn't in search results. HTML use six levels off adding decks age 12 h six, where the age one defines the most important and a six. The least important having. So I'm going to write my anything using the HTML code, starting with the tech it one and inserting the decks that is used. S page topic did like I told you before a punch that talks about travel destination in disguise. I'm going to talk about India and describe some information about this country for these guys. I put the text welcome to him. Yet between adding Tex, I'm going to make another copy and changing adding tech to age two and see the differences between them. Now that I make the changes, you can see the differences in brother using the life review to starting in the top with having one and below with anything to at the top. You can see the title travel with us that I change in the title tech. I have now my main topic in Where, Pledge Using the endings. Next video, I will talk about paragraphs 8. Insert your First Paragraphs: Welcome again, students. At this point off the class, we change the page title and write the main topic using the adding tech. It's time to write some text about the page subject. I'm going into this now. The paragraphs. They are one of the most used. Html TEX The paragraph Tech is used in pairs, the opening deck using P going before the bear ref texts and the closing tech flesh be going after the text. You should use the paragraphs to text blocks within your webpage. The browser at automatically line breaks before and after your paragraphs to give the page a consistent look. In my made folder, I have a file named Text India, where I have the decks that I want for the page. Just need to open, copy and now insert between the paragraph tag. Now that I paste the text, let's save the file and see how it looks in the browser. You can see now the text in our own page with the adding above. Although in my HTML file, the copy text appears with many lines and manu spaces between words. The browser does not reflect these different lines in spices, appearing all the decks fall with this. Lines in spaces are ignored by the browser. If I make now a copy off paragraph contents, you can see that the page as another bear ref end to use off parents. Like I said previously, at line breaks in the beginning. Indians off the new barrier If if you want to have more line breaks between paragraphs or 80 and over text, image or other content, you can use the line break tech that is represented by B R. This deck as only opening dick I use now my html file to put line breaks inside. My first spare ref bitten the words Ocean and India and another between the two paragraphs with the main text you can see in the browser. X expected that you have a line break after ocean work and if more one line break between the do bear riffs, Line breaks are very useful, and we can't just drop them into our HTML wherever we want to change the spacing between certain elements. After these two texts, you will learn in the next lesson some text to form a text. See you soon 9. Text Formatting: hello again after we talk about paragraphs and line break tags, let's introduce the new techs, starting with bold and italic when I want to define a bowl text. I used to be tech that can be used in a single or multiple forward words and can be defined inside other tent like a paragraph or a leaper link or outside, just using the bold tech this to tax. A bold and italic were used in older versions off HTML. They are declarative as depreciated, but browsers should continue to support depreciated texts, but eventually the stands are likely to become obsolete. In the future. However, this have been replaced by the emphasis tech represented by E. M and the stroke tech by default. This displays in italics and bold, respectively, so we can use them as director replacements. Plus, these new text are complied with the new latest HTML standards, the emphasis ed stroke html Tex. I used in the same way as other texts. We place the opening tag before the text and then the closing tech after the text that we want to write. I'm going now to use our HTML page for these two texts into situations first to form it with strong tech worth, India In my paragraph Just need to put the word inside. The strong starts an ending tech for the other situation. I want to create outside the bear ref. We'd strong emphasis formats. The text. This is a text. We'd strong tag looking to the page after we save you see the result expected with the world with strong emphasis format inside bear, ref and the next outside. Let's make now the same procedure with E m. Tech. I used the same words to make this change. First, the word India inside the text and next the text where I'm going to switch the decks from strong. Expect to emphasise Stand out that lets the text with tele size expect in the browser is visible. The changes using the GM tech the Martek is the next to talk about. This tag is used. If you want to highlight parts of your text, let's see now how it looks in the browser. I use again the word India to put between this new tech opening the browser. You can see debts district. I like to do words like I said before, after the Martek. It's time to small tag that, like the name says, defines a smaller text using Now this deck for off. Text off my bare ref and see the results. With the addition off this new tag in the browser, you see that part off bear left text is now smaller, the two lastex our view and instead the first defined apart off text that is deleted in a document and the second a word our techs that is inserted in a document. In the next example, they will be used together. I want to delete the word India and put Thailand's the work that I want to put in size text deal is India and in instead is worth Thailand. For the deleted word, the browser strike a line to under deleted worth, and the inserted work is now underlining after at the insert tech. He's so far now, students, see you next lesson 10. Insert Images: Welcome again students after we had Informa text. We are going now to use image in our webpage. To add images you have to use the image. Take I am G that just have a starting tech. I'm going to write my Ted using for important attributes that provide additional information about this HTML element. The first and the most important after produced the source that specifies the pets off the file. I'm going to have my source writing CRC and the final leg that is in my main directory. And if the name off India that J. Peg, you can see that software recognised automatically defile image debt is in my main directory, which is very useful. The other three important attributes are the ult that specifies an alternative text for an image. If the image cannot be displays. Finally, the ICT and with off the image to put the image with the size that you want, I will if I now the Alltech and writes text India image after dis tag I right, I've with value for hundreds pixels and I want to do with with the value off 300 pixels Now I saved the document and I can see the image in my browser. If you change one off the size at routes, for example, I've 200 you can see that the image appears with different size. As expected, Less action that I want to make is to change the name of the image, to not be recognized by the browser and can see the text that we defined in the deck, all changing in my coat to India. One. I see that in the browser. The image now is not recognized and the text in the image appears. The next step off this webpage is to link to pages off the website using a per links. 11. HTML Lists: For this new video, you will learn out to create lists. HTML offers two ways for specifying least of information that must contain when our market least elements using tech you l you create an A Norbert least marked with bullets and with tech O l and order it least which provides a number of least for this example and using ph own dot html I want to create an in order at least after the image death I m in the page before start my least just going to create a paragraph with text, meet India top cities. And after this text, I will put my in order list with three city names, starting with my tech You l I define that i f and in order list and between the u l starting and ending tech, I put each element on my list inside the tech l I first element off least is text Balmain. The second will be Deli City and last Elements bangle are I have now in my page listed three cities using an ordered lists as you can see in the browser if you change from you l 20 l you see that instead off bullets you F numbers in each element off the are released. As you can see, it's very easy to create lease with HTML. For instance. You can use this lists off cities to create street individual by just dead. Describe each city using April ings two rows between the pages. It just a suggestion to use this list. Thank you and see you next lesson. 12. Create Hyperlinks: Hello do this new class. I want to create any per link between two different pages and use internal links to jumped with specified part off the current page, starting with April Inc. First, I'm going to copy my own page and create another debt. I give the name about dot html now just opened the new HTML file and elite the older texts and replaced new content debt. I want for my second page to be sure that the second pitch is different. The new text is in my text file that I used for my first page. I'm going to copy now the text and make the change in the new pitch. After changed the text, I use another image using this same coat. I just need to select in my main directory the image we think travel dot Jay Pek instead off India dot jay pek. I have now my two pages with all contents that I want, and it's time to create the Sperling's. The tech that is defined for April links is the ATEC. One of the most important answer boots off this element is a draft attributes, which indicates the link destination that can be an external link to and where Patch are simply a new polling toe. Another page that I have in my directory. I'm going to open my a tech and my attribute. A draft receives my second page about dot html now just F two right between the start and and tag the text that as the April Inc I write for disguised dext about us and close finally, Atec watching now the pipes in the browser. I can see that the per link in the decks and if I click I opened the page about dot html s we wanted now just need to create a link from page about dot html to the page home. It plates about dot html i f. To use the same mattered to connect to their own pitch with a draft receiving page on dot html and right on page, creating an April linked to the initial page we finished. Now the deeper link part you can navigate now between these two pages. Other option is to link to a specific part of your document instead off another page. If you want to link to a specific part, you can use idea attributes that allow you to identify a part of your pitch and gem to the section using any per link page links our rights four times when you have a lot of information on a Web page and want to give the user a way to jump to a particular section. In the next example, I used this method just to go from the bottom off the bite, stood atop using any pearling and creating an I D. On the heading off the page For this situation, I put in my adding tech and I d with name back top, and this part off document is now recognised. With this, I d now just need to create a link at the bottom off the page to jump to the top, using in my tech the attribute, a draft with the ash tag and the idea that I give on top. Having the last step is to write text top edge to F any pearling text to jump to the top of the page. I'm just going to make some copies off the image to put more content on the page and see better the effect off the fledgling. The bottom link is now jumping to the beginning as you can see you. So for now, see you next lesson 13. Tables: Hello. It's time to create stables in your website. HTML Tables are right for when you want to present information in a clear and structure, it form being easier to arrange that, like text, images and links. Let's take a look at HTML used to create a table. There are four main text used to create tables. An HTML table is defined with table tech that defines the start off table and have corresponded, ending tech to the end. Off the table, it's table row is defined with TR tech. The other is defined with th tech, which by the fault display table Eddings with both far Matt and Central giving more emphasis to our table column. Methinks a table data is defined with Tedy and is used to write different kinds of data in cell. All this far texts as a starting and ending tech to define the beginning and the end off each element. For the next example, I want to make a table with two columns and two rows, which went off the rose is the ending of the table. Like I said previously, the table start with the table tech, and after these I want my leading role using the TR Tech. And now I define the data inside the row as adding, using the th two times because I have two cells to put heading data inside the th tex I write adding one and heading to and my row is now finishes to create the second row. I right now my tr tech and between the start and end in Tech, I create two TD texts to put my daughter in the two cells, writing data one and dated to now. It's time to save my changes and see the results in the browser. As expected, we get a table which to rose by two columns with adding in the first column and that in the other row, as you can see, it's very easy to create tables using HTML. See you next lesson. 14. Insert Comments: for this lesson, I will talk about out to make comments in your coats. The comments stick is used to insert comments that will not be displayed in your browser and do not affect your HTML coat and correspondent. Where pH expects The main advantage of using comments is the explanation off the right and coat having special relevance when user is taking the first steps in HTML, or even for users with more experience when they use very extensive coat and work in many projects and sometimes are very months without working in some of that project. As you can see in this page, I already put the Siri's off comments to insert them. I used the common tech, and between the beginning and ending tech, I insert the comments that will explain each part off the coat, each different elements that I m. In my file. Ever comment, just telling what kind of content to called will put like paragraph, stables, lists and so on. If you want, you can add more extensive comments to explain in detail what each part of the coat does. In this example, I write a comment saying that I have ordered list using the ol Tech to explain what the stacked this It's all for now. See you next lesson 15. HTML Styles: as previously. I said, the HTML is used with the proposal of creating contents for the Internet pages. But when we talk about the appearance of its elements, HTML is very limited. What? It's not good. If you are trying to give a website a personal layout or identity, their proposal of this video is just to give a slight introduction to the styles off the HTML content to highlight some of the potential off the cascading style sheets language, also known as CSS, returning to the appearance off the elements. The CSS is what allows you to make the changes off color, position and other properties off elements, using an attribute with name style that receives a CSS property and correspondent value that enable the change off the style in the HTML element. So the main rule is the use of a style associated with attack, and for this example I used in the attack, P created a style Edward to change property color off the text with value blue. The property and value will define what to change in the HTML elements for this guy's paragraph will modify the text caller to blue. As you can see in the browser. There are other properties used in paragraphs that we can use. Weed style Attribute like text the line for text alignment, phone size and fun family. For text funds, you can apply Martin one rule in your tech. Just need to separate each ruled by semi colon. I want to apply now. Other rule to this paragraph. Changing the text size Using the fun size property with value 14 pixels in the browser is visible. The changes with this new value Other great change we can make is the background color off the page that by default is white. These change must be applied inside the body startek if you want to apply the color to all the page using the background color property inside body tag, I defined background color with value light right after saving the file, we can see that the process now reflects these changes with the new background color light gray. It's all for now. Thanks 16. HTML Forms I: Welcome again to this new video. The next few minutes are dedicated to creating forms. HTML forms are one of the main points of interaction between the user and a website. They allow users to send different type of data from website dated that most of the time is Cento, a Web server that has the function to receive and manage data. An HTML form can be made off text fields, buttons, select boxes, check boxes or radio buttons. The main difference between HTML form and the simple HTML document is that the most of the time the data collected by the form is sent to a Web server. Like I said previously in that guy's unit set up Web server to receive and process the data . The proposed off this video is not to set up a Web server. It's to learn out to create different types of farms using text fields, submit buttons and radio buttons, starting with the coat that helps you understand better out to create the farm. The HTML form always start with Fordham Tech that represents a document section that contains interactive controls to submit information to a Web server inside start and closing form Tech is where we we insert the different elements. The most popular element is the HTML input element that is used to create interactive controls for Web based forms in order to accept data from the user, There are different types off input elements like text fields, radio buttons, check boxes and others. The first example to show uses two types off elements text fields to receive information and a submit button. Start writing my coat. I create the start and end off section using the tech form. The next step is to add the elements off the farm, inserting input tech that there's an attribute called Type that receives the type off elements in disguise. I want a text field to rights, so this element receives a value text. The next afterward is the attribute name that I used to receive the name by which the value in certain on the text field will be recognized for disguise. I give the name attribute, value my name. The last action is right name before input tech to appears the steps before the insert text field making an overview. First i f an input element that is from type text and we'll receive a value that will be recognized as my name in the browser is visible. This in Patel Mint, where we can write texts now it's time to create another similar element that receives the age instead of name. Just got beat the previous coat and now right age before input Tech and changed the name attribute to my age to be recognized. Now with this new name, the less change to Mike is changed the type for him next to number because now in this field, I want to receive an age that is represented by a number to submit Now this farm we to feels I have to put any put button. I have to change the type from text to submit because now I have to submit information required This input element as a value after route that receives debts, death submit button shows. I just want that appears text submit into button. The browser show was now this tree input elements first receives text, other numbers and for last one to confirm the inserted data, you can see that the second field that receives numbers as arrows to increase and decrease the number that you put on the field. This situation is only possible because the field was defined as number and not text. The final detail is address that you can see on the top off the page, where you see denying attribute that I defined as my name and my age that are now receiving the information that I write in the two fields. My name received information wish and my age. The number 35. This is a clever waited into fight information that has been submitted in the farm. 17. HTML Forms II: after the first form, it's time to create a farm that receives passwords. I want now a new form with the logging that receives text type and every value my logging in the attitudes name. In the second input element, I want to receive the best word. So mine put element as a type password to the text, not be visible. I define now there through the night for the settlement with value my best. The last element is the submit button like we create in the previous exercise. I can see now in the browser this new form that is very used in situations about indication on websites. Now that I ever form with lugging Best and submit button, I'm going to have a radio button to the last created form to define the gender off the person. To wear this kind off input element, I have to change the type to radio and defined attributes. Nine with value my gender to my two input elements. When you have a list of radio buttons developed given to name after, it must be the same for each option in the least to ensure that Onley one radio input in the group can be selected when the farm is submitted, it will include the content off value attribute that I defined to each selected radio button for the first input element developed. Defiant is male and the second female. I have now my new farm with the radio button and it in the browser Arnel visible the changes with this new field types. The last change is the addition off a button that makes the reset off the information that you put on the farm. That might be useful when we are filling out the form and there is a mistake in writing. I just need another input element where I define my type resets, and I want that the button appears with the text reset button opening the browser. You see that when select this button, the information in the different text fields will gleam like expected 18. Introduction to Multimedia Content: multimedia like sounds, music and video files can add some interactive contents to attract and all the attention off the viewers. Sites with these contents are frequently preferred by marketing departments because off their ability to completely present branding using coat that has been available for years. Now you can empty any number off different types of multimedia files, creating amazing contents in a website. In the next videos, I will show you a Siri's off HTML text that will allow you to add multimedia elements with the proposed off reaching the content of a webpage. 19. Insert Videos in a Webpage: Hello. This is the first lesson where I use a multimedia element video that is used to specify video on HTML documents. To introduce this type of content, I used attack video that has the function Toe end video union document. In the crew self introduction to HTML, you learn that elements can have attributes. Debt provides additional information about the specific element for this type of element. There are two important attributes the I've ended with, like use in the images, because if I and with are not set the pledge, my flicker wildly video loads. For this example, I use video element with the with off for 100 pixels, and I've off 300 pixels. Finally, the controls attributes is used to offer controls that allow the user to control video playback, including volume seeking and buzz resume Blais Vic. Inside the video, I used this AR stack that receives alternative video files, which the browser may choose from. The Browder simply will use the first recognized formats I used for these guys to attributes in this element. CRC two specifies the video source and attribute type to tell us the Internet media type off the media resource for this example. The file is movie that and before, and the type is video em before I use a name before file, but html file support other two different video formats. Where them and hug. Finally, the text between the video Tex is only displayed in browser death do not support the video elements in disguise. I put the message invalid, brother. After finishing the cold, let's see how it looks in the brother de video. Like expected as a serious off. What roles they help you to manage the video content. Now, if you want that, the video starts automatically in your page. Just f to change the attributes controls when I believe and you see in the browser after saving of the changes. Death Review Real start by himself. It's all for now, Students. See you next lesson. 20. Insert Audio - HTML5: hello After David you. Let's talk about the of you. That is another important multimedia element when I want to insert sounds. I used value tech and, like the video uses controls attribute to display of your controls like Bligh bows n volume . So I started my audio elements that at death through it controls next the source element that allows you to specify alternative. All the files which the brother may choose from the browser will use the first recognized format, like in the video. For these element I use against CRC attribute to receive the source file. And for this example, I want to blow a file loading dock wave type attribute, specifies the type of file for these guys and now the file and receives the value Al do wife. Besides the way far mint value element supports to other type off files and between and ogg . Finally, the text between value starts and closing tech will be displayed in the browser that not support these elements. Just like individual example, I right now the message invalid brother. For these elements in the browser, you now have the video from the previous lesson and inserted audiophile. Just need to use the play button to start these files it So for now, see you next lesson 21. Object Tag: hello. It's time to introduce a new element. The object ditched email object element represent an external resource which can be treated as an image or simply a resource to be and led by a plug in. You can use this element to empty multimedia in your webpages. Like How do you view flash files or simply another webpage into your HTML documents? For this first example, I define an object with the with off 300 pixels, and I've off 200 pixels and receives him that attributes the name off the resource for this case. File video dot m Before, after saving, you can see this file loading in the brother. The next block F coat I introducing Steph a video file. An HTML file that I m. In another folder Call Tim plight and using the foul. We deny I'm index that HTML with the wheat off 800 pixels, and I thought 600 pixels. The results in the browser is another HTML file that you can see in the page and appears after the lightest in certain video. It's all for now. Students see you soon 22. Insert Interactive Content using Embed Tag - HTML5: hello and welcome again. The next step to show you is them tech did HTML in element is used for ending an external application or interactive content. What we call a plug in for this next example I simply going to end another video like the object ailments I defined my with and I've for this example with a with off 600 pixels and I thought 400 pixels and the source file is now given by CRC Attribute that receives the file movie one dot mp for these stick has not being a part off html four and its new in version five. One difference between object and then empty element is that the first s starting and tech and them just f opening tech. As you can see, you can see in the browser the and video object that we defined in the source property. It's so for now. See you next lesson 23. Insert Youtube Videos: Welcome again. The easiest way to play videos with HTML is using you to The difference between the previous examples is that I used videos that were saved in my main directory, but for disguise, my source will be the video pets in the Internet to play a video on your webpage using you to use the I frame tech that specifies in your line frame. Start writing my cold. I opened I frame and specified wheat off 400 pixels, and I thought 300 pixels To change that. I mentioned off the player the SRC attributes Give me who are l video that I want to play and for disguise. I copy one Warrell that I have in my text file and best to my coat editor. How do I get this link? Simply have to go to YouTube and then, after select one video, you clicking share and select Option and and appears in S. R. C. Attributes the link that you need to win the video link that is different from the original link off the video. It's visible now. Do you do video in the browser after this step? If I want automatically to play the video when a user visits the page, just need to have a simple perimeter toe. Your YouTube, who are l also play with really one. We'll make it play automatically. The default value is out of play with value zero that makes video. Don't play out. You can see in the browser that with this auto play enable the video starts when I open the page. Another option is to play the video in loop without stopping to make that change. I yet the perimeter loop and give the Valley one, and now the video will loop as we want. Loop with value. Zero is the default value off this perimeter. I run now the movie again and put the video at the end to see that video will start again automatically. The last guys to show is the display off. The player controls that, by default is very one. What makes display the controls. If you want to remove the controls, just need to change the controls Perimeter to value zero and the controls will be disabled like you can see now in the page. Things 24. Create an youtube playlist: Hello and welcome again, You know, now, out to end YouTube videos in your webpage, change some properties for the videos like enable and disable the controls, looping video and changing the sides off the video player for this new exercise, I want to add a video, but using a playlist from YouTube instead off a single video like you did in the previous lesson. If you still remember to Wims a video from YouTube, I use the eye frame tech ending the SRC attributes. I put them the dressed to get this address. I select the video that I want then clicking share and select option end and appears in SRC them the dress that you need to copy to your coat editor now starting. We'd called for my playlist. I'm going to create the I frame tech And first I defined the size off the player with a wheat off 500 pixels and I taught 400 pixels. Next s are see where I'm going to receive the playlist address to receive the playlist. You always can use this standard coat that I have in common. The trick is the idea that appears at the end off the address after the vehicle symbol to have this I d. I go to you to where I have selected every do next. I selected channel name to display all the playlists off the channel. And after that, I select the second playlist that F 138 videos. The playlist is now open it and I have to select on the top the dress I d. That is next to the equal symbol. This is the idea that I have to add to my S r. C address making now the copy. I opened the browser and you can see that the least s 130 18 years like expected to best to the next videos off the playlist. Just need to go to the controls Buttons to change to the next playlist video. That's all for now. Thanks 25. Introduction to CSS: Hello. At this point, you have learned HTML language that is used to create page content content that by default follows the normal flow of a webpage. But this language does not take into account the creation off styles such as the type off front. Youth callers position off different elements, change off image size and other details. It's here. Debt, CSS place. An important role being descended. Why? To style plane Web text with funds scholars, April links Providing a powerful control over the presentation often. HTML Document CSS. Also known s cascading style sheets can be easily separated from HTML. What turns very easy to modify the entire look off the website. There are other great advantages off CSS being easy to learn and understand increasing low speeds in a webpage as an easy maintenance, and you can reuse the same style shit in multiple Web pages. In the next lessons, you will see how to create styles for wear pages in order to think advantage off all these benefits off cascading style sheets. Thanks 26. CSS syntax: Like I said previously. CSS is used to change the style of elements created inv aged ml cold. The first important step is out to create a style to create styles I missed F A rule debt consists in a selector and a declaration block that is in a structure delimited by a no ping brace and the closing one, where a selector is in HTML tech like a netting or better ref tag at which a style will be applied. The declaration block as a single property or the group of properties like color with ICT debt are the selected properties that I want to change the style, using the values that is the part which assigns a particular value to the property that we are changing in resume. I want to change an HTML tech that is given by a selector that is, a property that I want to sign with a respective value. To be more clear in the example below, I want to change the color to green and text funds to verdana off my paragraph. Debt is defined in my coat. As you can see in the image be tag is my selector, color and font family are the properties that I want to change and green n verdana our developers that I want to assign to the properties. If you want to change more than one property for a specific tech like in this example, you have to use a semi column between each pair off property and value. Other different situation is where you want to affect more than one HTML tag with same style. For that situation, you use a column to separate each one off the selector to change. I will now with unending before tariff and I applied to the adding the same rule that I apply for the paragraph. So I just need to wear this new selector to share the paragraph rule with having tech. That's what I made now where I apply the rule created to my having element as you see in the browser. Having text is now affected with the same style created for the paragraph. Thanks 27. Class and Id Selectors: Hello again. We already saw the HTML selectors that are used to represent texts like paragraphs, and everything's like you saw previously. But you can also define your own selectors using classes and I d selectors. The benefits of using classes and I DS is that you can have the same HTML element but present it differently depending on his class or I D. So I can have more than one paragraph in a page that can have different styles because they use different classes or ID's in the CSS. A class selector is the name preceded by a dot and an I. D selector is a name preceded by a Nash character, now more in detail and starting with glasses like I said can be used when you want different styles of a particular element. For this example, I have two paragraphs and then adding, and I want to style two paragraphs using different text, color and font sizes. First paragraph with front size 20 pixels and color blue and second pair riff farting pixels and color brown. Within our HTML cold. We assign a particular class by using the class attributes within our tech for the situation. I need to different classes because I want different styles. Defining first paragraph with name first and second with name. Second when I defined these two classes in CSS, always starting with that followed bike Last name I use for class first, front size with value 20 pixels and color blue and for my class seconds the same properties front size, but now with value 14 pixels and color with value brown, you can distinguish now these different styles in the browser. As you can see. Other thing I can make that is a little bit different is affect all elements that I want with the same style. For this example, I just want to have the same style used for first paragraph in my having element, joining the adding with class first using coma to separate the two texts. And now the style is similar to both elements. So the great advantage of using classes is that I can reuse the same styles in multiple elements. Next step is I D selectors Debt in CSS allow you to target elements by their I D values. The big difference when compared with classes, is that I the selectors, are unique. So you can apply on Lee to the content off one element. If you remember in HTML, I d can be used to create an anchor tooling to a specific part off the page. And if you include Martin when I d. The browser will not know where to go when you make reference to the i D. Because that I d is used in different parts off the HTML document. That's what you see in the file own dot html that I create previously, where I have an anchor defined that makes that stoppage link jumped to the element that as the i d back top that is my adding one element. If you have more than one element with these I d. Name the browser, don't know where to go. This is a simple example to understand why I d is only used one time we'd same value. So using the previous example used in glasses, I change now class to I D. And where I defined the styles instead of use a point before die. The name I used the hash tech for this first situation. I don't change the style for my adding element. As expected, the final. I'll put a similar like when I used glasses applying different styles to the paragraphs. If now I want to change the style for the ending to be similar with first paragraph, you cannot use I d selector because, like I said, you cannot use a mighty in different elements in your documents. So the better way is to use a class to effect paragraph and adding, We'd same style like ideas before thanks. 28. How to add CSS Styles: to wear it. CSS styles In a website, you can use three different ways to insert CSS cold, the first internal style shit second, external style shit and last using in Leiden style. The advantage for using each depends on what you are doing with style. Let's see now out to use each one of them and what the advantage and these advantages. First, the internal style shits where you write This year's has called for the weapons in dead section off a particular file being inserted inside the style opening and close tech. That was the methods that I used in the previous chapters, where I change the style of a bear ref. And then having this makes it easy to apply styles in order to reuse Deco's Do these advantage off using an internal style shit is that changes to the internal style shit on Lee Effect the page where the causes inserted into. So if you want to apply styles in another pages, you need to declare all of your styles on every single page of your website inside the section F. For the next example, I want to specify some new properties, foreign adding and the paragraph that I have defined in the HTML colt using some text. Like I said, the gold is written in that section and inside style tag I defined now with CSS rule for my having one with color blue and size 24 pixels. For the paragraph, I want the fund size with value 20 pixels, background color yellow and to define the fun family I use value could here. Now that I define adding in paragraph rules, you see the changes in the browser the second way to wear it sell sheets to your weapons is using an external style shit that is simple. A CSS individual filed that you link to your website. The huge advantage of using this method is that whatever you changed in the CSS shit will affect every page in your website that is connected to the CSS file. So dis prevents you from having to make medical changes in each page. CSS files can be created using any text editor like when you create an HTML file. The only difference is that you must save the file with the CSS extension to include an external style sheet in one off your webpages. You need to have a link tech within the earth. Take off your page where you use attributes. REHL Debt specifies the relationship between the current document and linked documents and type attribute to tell the media. Type off the length documents. Did a draft simply tell? Is the location off the CSS file? You can see now all these attributes defines in our document using style sheets called style dot CSS. So I want to ever see assess file type with names style. And that's what I do know create in my main directory. The file with name, style dot CSS that will be my external style sheets. In the first example of internal style shits, I create the style for adding in paragraph elements, but now I want to do the same. But with the external CSS file, I just need to move the rule created to my CSS file after saving defile is visible debt. My webpage still f the styles applied previously with text color blue and size 24 pixels and the cells defined for the paragraph with front size, 20 pixels, background color yellow and fund family Could ea if I simple change, spare ref background color in CSS. You see that HTML documents that is connected to external CSS file will change background color off paragraph. As expected, Resuming external style sheets allow you to put all of your styling information into a completely separate CSS file. You can then simply reference CSS file from within. Each webpage and page content will then be styled according to the file. The obvious huge advantage off this method is that you need only change the style in your style sheet file, and the changes will cascade through the rest of your website being the best methods to use , giving a great flexibility and easy maintenance. Now, finally, Dean Line style that is specific to the tag itself uses the HTML style attributes to change the elements style. This method is not recommended because every change that you might in the CSS cold as to be made in every tag that you want to apply the style. So if you have three paragraphs in a page, you have to apply the styles three times inside each deck. This is a good matter to apply for individual CSS changes that are not to use repeatedly in a website for this example, I have to equal paragraphs where I changed the first, the caller to blue and font size to 30 pixels. This change our only applied to the specific paragraph you see in the browser. That situation where the second paragraph has no changes. This matter is far from ideal. Like I said, because if you want to change the style properties, you would have to have it each and every instance off the style on every single page of your website, Thanks. 29. Box model - Border, Margin and Padding properties: I Let's learn what is the CSS box model? The CSS box model is the basis off on layout control for the webpages. It is very easy to understand and use. Allowing us to position and space are HTML elements exactly as we want. There are four important elements in the box model. The first is our content. That can simply be an image are some texts and that is represented in these image at the center. Second element that is around the content is betting death, defying to the space between our content and the edge off the element. Next, we have the border element, which we can use to draw a line around our content and to finish. We have margin, which defines the space between the edge off the element and any other element off the page . So let's look to the street properties inserted in this model and see some of them starting with CSS border. That is the property that allow you to specify the style with and caller. Often elements border, and he's a short and property for the following individual border properties, the border wheat property that specifies do it's off the four borders do border style property that specifies what kind of border to display and the border color that is used to set the color off the four borders. If you use Onley, barred their property, you real effect all the four sides often element like this example where I ever style for my bereft border to effect all sides with a border wheat off 10 pixels bar their style. We saw his value and blue as my border caller. So what happens? You see these values applied in the paragraph like you can see in the browser in the least off CSS properties You see that U F individual properties for each side left, right, stop and bottom that can be used to change Onley one side off the border if you want. So if instead of border I use border top on Lee, the top side off the paragraph is affected with this property. That's what I'm going to do now Apply on Lee this property to border ducked. We'd saying values Onley changing barter style to dashed. So you see that this style is only applied to the top off our paragraph. Now let's look to the CSS margin property that is used to add space around elements. First, I replaced border values to Evel for borders. We'd same style. Now I m margin property to our paragraph rule. And if I simply create a margin with 100 pixels, this will give 100 pixels to all margins off the paragraph. I had now another pair if to see better the margins between these two elements if I simply changed to a lower margin value. The distance between the two elements decreases as expected, Margin property is just a simple, shortened property for the individual margin properties margin top rights bottom and left a similar situation that happens with border property. Now, if I want only change, stop margin off second pair if I have to waste to do it before I write C Assess And since I want to apply changes all in second tariff, I can create a class for my second paragraph that I give name text now in CSS code, I make the rule for this class with margin top property. We'd value one ever pixels and delete the previous rule inserted for paragraph elements. At this moment, I just have a margin top applied in the second paragraph using the correspondent class name . Other way that I can use is with margin property giving the Valley for all four sides 100 pixels for top zero for rights but, um, and left using margin property with value 100 000 The first value represents margin. Top second value with zero margin, right certain margin bottom and last margin left that is, in practice, the same as use margin. Top with value 100 pixels Now to finish margins if you want. Just margin left and right with 50 pixels and the others with zero, you just need to write zero 50 pixels zero and 50 pixels to finish the box model elements. The padding property that is used to generate spice between content and margin and uses very similar with margin property. There are CSS properties for setting the bedding for each side. Often element top rights bought them and left. But like margin, you can use the shortened property padding that used for individual properties for each one off the far sides. I changed now my second paragraph style, and there's a petting off 20 pixels and you see that spice between text and margin off second paragraph increases. If you only want to change just bottom value, you can simply use spending bottom with 10 pixels are you Use bedding property with zero zero, then pixels and zero being deserted. Valley correspondent to petting bottom property. It's so for now, things. 30. CSS Font Properties: I. We have seen up, too, despite sent excuse to create CSS gold as well some of the kids concepts associated with cascading style sheets. Now that you already explored some of the main properties, it's time to see other properties. Associate ID with text fund. The CSS fund properties are right for changing basic front settings such as the front family, different size and the front wave. With some properties, you can define boldness, size and the style off the text, starting with the front family property that defines the front that is applied to the selected element in CSS. There are two main types off fund family, the family name, where you define a specific fund family like times New Roman Ariel or verdana that you know from some Microsoft applications like Power Point. The other type is generic family that you can use to define a group off fun families with a similar look like Saref San serif or mono spice. In practice, every generic family as a Siri's off family names associative. But if you want to be more specific in the phone type that you want to use, it will always be better to use family names To specify the front, you can set the fun family off a text with the fund family property using these two types, this property should all several front names as a fallback systems. If the browser does not support the first fund, it tries the next fund and so one. In this next code example, I defined for my first paragraph the fund Family property First with value. Verdana that is my first choice. Second possible value Ariel and less option. I used the generic family mono space. That is my lowest priority. So if in your computer, you not ever than it or aerial the page would use whatever mono spice funds it could find. For the second paragraph, I use other phone combination, starting with value times New Roman for first priority and for second option and final fun Family could here. For this example, I did not to use any generic family. Now the second property used for texts. The phone style that is mostly used to specify italic text. This property has three values normal, that is default value where the text is shown normally like you see now where I apply this value in CSS code changing for italic. You see that the text is shown in italics like when you use this style in text applications like Microsoft words and finally, oblique that is similar to italic but last support. The next property is fun sized that I used in some previous examples and specifies the size off the front that I applied. At this point, I always used this property with pixel units, but in another videos you will see that there are other in units that you can use with more advantages. The syntax used for this property is fun size and correspondent value. For the first paragraph, I apply now phone size off 14 pixels, and in the second paragraph, I m a value off 20 pixels. Finally different white. That said, salty cart in characters in text would be displayed. This property accepts either cured value or pred if I ng numeric value. De available keywords are normal that is used to define normal characters, and these the default value bull value that, like you see, define stick characters bolder and lighter are related to the computed front white off the parent elements that is a more invents concept that is related to the Eric E. Off baj elements that I will talking another lessons. At this point, you just need to know that in most off situations value Boulder is similar with value bolt and lighter with value Normal. Other option for this property is using numeric values, where the Q word value normal maps did in America Valley 4/100 and the value bolt maps to seven hundreds that I used now in second paragraph and this similar with valid that I f in first tariff this property can and values from when hundreds to nine hundreds, where steps are more multiples off when hundreds, that's all for now. 31. Text Properties: Let's look now for some text properties that can be used together with fund property stalked previously first text. The line did allow us to align text within an element you can choose from left, right, center or justify note that this property alliance text within its containing elements, not in the entire page. For the next example, I have a longer texts for the two paragraphs where the second don't have any value off text align while the first paragraph I said it with value left. You see that after assuming the value left, the alignment did not change being equal to second paragraph because left is the default align value that the second paragraph or any paragraph assume if the property is not defined. Then I changed the value off the first paragraph to right. And here we see differences in the alignment off the two texts, one a line to the right and other to the left. The next value is center, centering the text, and finally we have the value. Justify now, the CSS Caller property debt defied the foreground color off the text content, foreign element, receiving the color name or digs a decimal code corresponding to the color I used in the beginning. Some examples for this property. And now I'm going to wear this property to the paragraphs, giving color gray to first paragraph texts. If I simple want eggs a decimal call for the same color, I just need to use some pie. Just debt everyday exit decimal values for different colors. Watching for color gray. I see that exit decimal called for gray is 808080 This is a cold that I need to put in CSS and you see that there is no changes in the paragraph text color as expected, because into two paragraphs, I define the same color. Next property is letter spicing. Death controls the amount off spice between each letter in a given element. Veli normal is the default value and you can use a land value using different units like you use in deformed size. I define in this example for my second paragraph a letter spacing with value two pixels and now changing to four pixels. You see that spice increases changing to normal. The spice takes the default spice between letters Situation similar to the first paragraph where I don't use this property. Assuming the default spice to finish text properties, I have the line. I'd CSS property that sets the amount of spice used for lines such as in text unblock level elements. It specifies the minimum I'd off the line boxes within derailment on non replaced in line elements. It specifies the I that is used to calculate line box. Let's see in the next lesson do concepts off block and in line elements. I now use this property in first paragraph and give a value off farting pixels and you see that we ever different spice between lines as expected, increasing the value space will grow and decreasing spice reduce, that's all for now, thanks. 32. Block & Inline Elements (Div and Span elements): now, time to understand block and in line elements that I talked to in previous video. In an HTML document, we can have these two types off elements block and in line. It's very important to understand the concept at the differences between these two types of elements that are widely using where pages to create different sections, starting with block elements a block element by default always start on a new line and occupy all the with, like some elements that you already know, like tariffs. Tables are forms and block elements stack up one on top off the other. I now create an example with the existing paragraphs where I define for the first a new property names, background color, death defying scholar to element backgrounds. For this example, I apply a background color with blue value that help us to see the spice occupied by the paragraph. You see that after using the property, the paragraph occupies the entire with off the page. Like I said, that happens with block elements. If I simply leave the paragraph with a few words, you see that paragraph continues to occupy the full with. If I define background color to second paragraph you see, the second paragraph is below first, occupying again, all the with I introduced now a new important block element did. If represented by DIF Tech Network as a container having a start and ending tech and is one off the most used to create different sections in a webpage, allowing to put and separate the contents off the page, the settlement works like tariff and other block elements occupying all the hydrates. I now define a section in my code, using def that contains the two paragraphs that I m in the page and give glass name container to this new element in my CSS coat I defined for this class a green collar backgrounds and the padding off 10 pixels. After these changes, you can see that our paragraphs are inside these elements that occupies all the page wreath . Now it's time for the in line elements and in line element does not start on the new line and only takes up as much with as necessary. What not happens with block elements. Examples like images are April Inc elements represent in line elements. I now creating my coat a text with April ing to see that this ailment does not like a by the full wheat. For these, I use a tech for April ink and some texts into CSS cold. I set now for the settlements, a red color backgrounds and looking to the page. You see that this element occupies only the spice off its content. What not happens with the paragraphs? After having used a new block element, Deve, I use now a new in line element, the element span that is represented using this Pantech debt as a start an ending tech. I now use the first tariff and puts involved text inside this new element. If I said this element to a gray color background, you see that only the content that is inside the stack is affected by the background color working like an in line element. Okay, in resume, we can have two types of elements block aunt in line. The block elements occupy the entire with off the page like deep debt we created with background color green and the paragraphs with blue background color deadline elements do not take a pitiful wheat being. The example used in the speech and Nipper link with rev background color and the new span elements with background color gray Thanks 33. Width and Height Properties: I we have checked previously death by default. The block elements occupy the entire with off the page. There are, however, several properties that allow you changing the with off the settlements so that the space occupied adapt to the size that we want to define the with. We have the with property that can be applied to an element this property off the element does not include bedding, borders or margins. In this next example, I have to do gives one with green color and another blue that occupy the entire with off the page as I decreased browser. The pledge size decreases the content, and the DIV will adjust with to screen size and increase I've if necessary. If I now use the wheat property with 900 pixels for the first eve, what happens? Did it would Onley occupy night 100 pizzas instead off the full with? The problem is that by decreasing the size of the page, the diva reminds the same size, not adjusting the dif to the size off the window. It's here that we introduced the Property Mac suite that makes the 900 pixels and minimum value and not a fixed value So I have lower with values if the window is recites to values below 900 pixels, as we can see now in the brother. Another possible scenario is the use up the two properties at the same time in the first live. If you use Max with with 800 pixels value, what happens did he will assume this new value, but as a fixed value, not adjusting to content to values lower than 800 pixels. Now, adding the mind with property in the second Div. Let's create a minimum value for the with off 600 pixels. What happens in this situation is that they will follow the maximum with off the window but Onley up to the value off mine with for values lowered, then 600 pixels to D reminds with the sweet leaving the content toe an overflow situation. I'm going now. Talk about the ID property that defines the I've often element. If I set in the first defied off 300 pixels, the behavior will be similar to the white property where developers off white and I are fixed and there are no changes in the Deve with the resizing off the window the same way I created minimum and maximum value for the with I can create for I've for the first day if I give minimum values off with off 200 pixels and I've off 150 pixels. What happens in this situation is that as I decrease the browser with the wheat off, the and content will adapt to the size. Yes, for the I've we see that as we have a minimum off 150 pixels, we have some free spice without content. And as I shrink the window, the ICT off the green leaf is adjusting its side to the contents. Now for the last situation when entered at 50 pixels for the max I've for disguise, we do not have defined minimum. I've value So the first chief justice side do the content. If I decrease the size off the window, I get a situation where the green deep reaches 150 pixels off life and the longer increases the IIF, causing an over full situation. As you can see now, 34. Position Property: the position property specifies our ailment is position it in a document using top right button and left properties to shift the element to the final location. This property can assume five different values static that is, the default value related absolute fixed and sticky, beginning with related position that allow us to shift our elements around in relation to where they would have bean blessed by default. Using related position, you need to specify the amount that you want to shift. The ailment using four properties top left bottom and rights followed by a value dead corresponds to the distance to shift for the next example. I want to apply that situations to the two deeps that I have defined in HTML for the 1st 1 I define a week off 300 pixels. ICT off 100 pixels ended our great background color in the second day, if I ever. With off 400 pixels, I've off 100 pixels and green as the background color in the brother. We see the expected position off the deeps being one on stop off the other. If we now set to the first related position, giving a value off 20 pixels to the top property and 40 pixels to left. It turns out that the first dif change position 20 pixels from the top and 40 pixels from the left side changing its final position and the second dif without changes. If I applied to the second day of the same values I created for the 1st 1 is expected at it can be seen dead. Second, Dief is in the same position related to the second if, as it happened, it initially since the same offset values were applied to the two chiefs, I will now give a final example for the related position in disguise. If you want to put the second eve on the right side off the 1st 1 for the situation, I will have to move the second if up to 100 pixels, which corresponds to a value off minus 100 pixels to the top property end to the right, corresponding to a left side offset that has to be equal to do with value off the first def in disguise, 300 pixels we can now see the thieves are side by side as expected. Now the absolute position that allows the place any patch element exactly where you want using again properties top left, bottom and right to set the location. One important detail is that the position off the element is based on its closest position assessor position for the situation Body is the closest ancestor. What makes that shift that I give to defense is based on my entire page. First I changed first dif with to 400 pixels and second to 300 peoples. And if I said the first and second defeat to the absolute position and and left and top properties with zero value that makes that two thieves are placed on the top left off the batch, we'd second dif above first. Now if I change left until values off second Eve to 100 pixels, you see that this div moves to other parts of the patch corresponding to the shift That's I apply now to finish the foot position. I present another different situation, creating assertive within the second. With this structure off gives the second Dief is the ancestor off the search. So if I create for 30 if with absolute position and left value off 50 pixels, this dif will move from left to right, 50 pixels related to the position off the second if and not in relation from the top left off the page. There is also a second type of absolute CSS positioning called fixed positioning, which you can use to locate an HTML element at an exact place in relations to the user's screen in step off brother. We know the difference to absolute here is that the ailment will remain in exactly the same position, even if the user scrolls down the page is what you see now where I said the first div with the fixed value for the position property and I placed the second, the further down the page and we the ICT off 1000 pixels to be able to scroll the badge and see the respective effect. As it is, we're five now on the page. The first def stays in the same place even when you are strolling the page. Finally, this sticky value where the elements is position it based on the user's scroll position. A sicky element changes between related and fixed, being treated as related position at first until it crosses a specific threshold at which point, it is treated as a fixed positions. Let's see an example to understand better disposition value. I have now on the batch set one paragraph and two chiefs, the first dif I set with sticky value. And for the second I add the merging top property with Valley off 200 pixels. Despite the two dif and I off 2000 pixels. To be able to use the scroll to see the effect, it's now necessary to defining the first Deve di Tresh hold that will tell at which point did Eve becomes fixed. In this example, I defined the top property with the value 10 pixels, which will cause that when the Deve is at this defined distance, it will remind fixed a situation that you can see now into the browser. If you want to change the position in which it is fixed up or down, just changed the value off the top property. I have now changed zero and you see differences when compared with previous example, we tend pixels for top value, thinks 35. Float and Clear properties: I welcome to another video I talked previously about Steve's that work as a visionary container death defying the different sections off our webpage gifts are used to group content, so it can be easy to style using the class or I D. Attributes that you have learned. Don't forget that these are block elements that I could buy 100% off the page reads, Having default behavior off, being stack up one on top off the other. Let's see now a very important property used to define your layouts. The foot property that is responsible for positioning and control lee out on webpages. This property let you put block elements side by side instead of on top off the other, giving control over the horizontal position often HTML elements to better understand all this property words. Let's make an example using three D EFS, other Neff and mine elements that I create in my coat. First, I simply defined style for my first Deve, using 100 pixels value for right and the background color light green for my Never Deve with 200 pixels of I and background Kohler Koro. And finally, for my main dif. I define the ICT with the value off 500 pixels and background color. Right? You see in the browser that thieves are all displayed in vertical on the top of each other and occupy all the patch with, as expected now starting changing the coat if I simple used float property with value left for the other. And if I know with off 33% I changed the position off that dif to the left, telling to the diva Nev that can flow around our instead off beginning underneath. If I had now some text to these second dif, you see that the text is floating around the other. If the text does not feed student ive, it happens overflow situation where a part of the deaths is outside the dif. Another possible scenario is when I want to defense to be side by side without having any element wrapping around the other. For this case, I have to add the float property to my second dif again with value left for disguise. We see that the DIF remains below the other because this Steve is a block element that occupies 100% off the weed by the fold. I can Onley position on the right side of together if I define a with that is equal to or less than the space left on the right side off the first dif like you see now in the image where I define a with with the value off 33% other detail visible is that the grade ive is now floating around the other two. Deif's debts. Every property float with value left. If I want to position the second div on the right side, I just need to change the float value from left to right and certainly you've still float around the two first. This what I want now is that less diff do not flow around the 1st 2 tiffs staying below. That's the scenario where I used the clear property. When this property receives the Value Boat, there are no floating elements allowed on either the left or the right side. So this dif moved down below the floated element. The clear property can still have left and right values in which, if we did not want elements to float on the left side. We applied the value left, and in case we do not want that to float on the right side. We used the value rights. That's the next situation. Toe watch I f at this moment a diva on the left side and another on the right side. If I apply the value clear left in my Sergeev, I check that Stop floating around first if Onley getting around the second dif second situation happens if I change value from left to right to see the d floating around left beef. I just need to change the ICT off first dif toe a value bigger than the second eve. Okay, you see now the three floating around first live and to finish I want three d is displayed in the same line, being very easy to apply. I just need to wear the float to my last def with barely left and give a with off 33% to all of them being arranged side by side. That's all for now. Thanks. 36. Relative and Absolute Units: cascading style sheets used different units for expressing the length. Many CSS properties, such as with bedding margin and fun size, take land values. Where lent is a number followed violence unit, such as pixels unit. Like I used in many previous examples, we can use two types of length units in CSS related and absolute starting with relating lengths units, they specify. A lint related with another Linz. One great advantage in style sheets that use related units is that you can easily scale from one will put the environment to another, like from a dressed up to a smartphone, creating responsive content. Let's see now the most important related units, starting with E M unit in CSS and the end unit, is equal to the computed front size for the element to which the M is applied. When I am, units are declared on child elements that don't have a fun size define. They will inherit their phone size from their parents or from another ancestor elements possibly going all the way back to the root element under documents. Let's see the following example to better understand I f. Two paragraphs first and seconds inserted inside a Deve with glass name content. I now set my class first. We the font size off 15 pixels. And as I said, one AM unit is equal to the font size value created for the element. So if I creates the line, I'd property in the same ailment with the Valley. One e m. Corresponds to a value off 15 pixels to the property line. I've If I give a value off two PM tow line, it receives the value off two times 15 pixels that corresponds to 30 pixels. I now set a value off 12 pixels to the font size off the class content. As you see the text, is inheriting the value set in their parent, a situation that happens only on second class because this class has no defined fun size. If I now define a phone size off 14 pixels in class seconds, you check that The second paragraph assumes different size created in class seconds. And when I had the line with value off 1 a.m. This time for class Second, this property calculates the valley for the light ICT related to the farting pixels that I define within the glass itself. Any changes I make in different size. Off the class content will not affect the properties created in the paragraphs because they themselves have the font size property defined. If you understand well, all the M unit works, then it's easy to understand the new R E M unit. This unit is related two different size off route element HTML that my default is 16 pixels , but this value can be changed by the user. I know. Make a simple example to distinguish the two units in my root HTML element. I set off on size off 14 pixels, while India def content define phone size with value to R E M. For the paragraphs, I have the values one R E M for the first and one PM for the seconds. What happens now? The first paragraph that as diarrhea, Munitz will calculate the value related to the farting pixels defines in the root element. Well, then ever fun size off 14 pixels, while the second element will make the calculation related to the parent content as the parent content is two times bigger than the value defined in route size, the size in content is 28 pixels, which will also be the value for the second paragraph if I change HTML Phone size. Real effect, as expected, The two paragraphs. Finally, I changed from size for def content, with value 12 pixels changing toe An absolute unit for this situation. If I change HTML font size, you only see changes in first paragraph because now second paragraph on size is related to the 12 pixels that I define in class content. Now the view part percentage lance related to the size off the window brother. When the ICT or with off the bras Aries change, they are scale accordingly. The use of these units related to the view part are important because they adapt the size off the contents to the size off the devices we can ever for possible different units related with view part. The 1st 2 are the unity Age that is related to 1% off the ICT. Off the view part initial containing block that is our brother Window and the Visa Lou that is related to 1% off the wit off the view part. In this example, we see two gifts creators, the first being identified by the other class and the second by the content class. I create now styles for these two classes by defining the 1st 1 with a light green background color and the second with light blue color. If I want the first gift to occupy off off the with and I've I just need to set do with to a value off 50 V W and the IDs to 50 V h. We can see that as I resize the window, it will always occupy off off the with, and I'd space Now far did, if content, I want that this element occupy 1/4 off the size off the window. To get this behavior. I just need to set the value to develop 25 end the age to the same value. In this example, Dave's occupy 75% off the view port. I've if I want them to occupy all their eyes, just need to give each of them a value off 50 or another combination of values in which the same off the two East 1/100. The last two units that use you part RV men and V Max units did allow you to access the size off the smaller or larger size off the view port if he used the men. You calculate a land that is related to 1% off the view port. Smaller dimension and using remix is related to 1% off the view port. Largest dimension. You will now see an example where I have to block elements defined by the other class at the top and content class below the other, I said. Now the ICT off these two thieves for the other. I define a write off 20 mean and for the glass contento right off 250 pixels. As you might expect for discontent class the it does not change because we are using an absolute value for the other. Right? I used TV Men unit with Value 20 which makes it occupy 20% of related to the smaller size off the view part in the browser, you can see the expected behavior using this unit. At this point, I have the view port where the smaller size is the ICT. So the ID for the other is related to the ICT off the view part that as the small size as I resize the window, the other I do not change because the view part right does not increase our decrees. When I get to a point where the with off the view port becomes smaller than the eye, I start having changes in the ID of the other as it is happening now, because the smaller size of the view part is now changing. If I return to the situation where the ID of the view parties the smaller size, if I change the eye of the view port, it suspected to ever change in the eyes off the other again. Finally, if you use for this example the V Max, I have a change in the eat off the other this time related to the larger size off the view . Parts at this moment do with off the view part as the largest size, so changing do with I ever changing the ice off the element other. Let's now see the units in percentage. This type of unit is very similar to the units related to the size of the view part, but instead of using the view part as a reference, it uses the ailment parents in this next example will be clear. This behavior where I f another element that will contain within the contents. Dif and I will define this same content dif outside the other for one off. The case is the parent off content element is the dif ever and for the other content dif outside. The other element body is the parents. I will now give a with off 800 pixels to the other elements and the Eid off 300 pixels. In the content class, I define a with with the percentage off 50%. What will happen is that for the case off the def content inside the other do. It will be 50% off the with off the other that is a fixed value. So do it will be 400 pixels for the class content defined below the other. The width will be defined in relation to the body which causes death. Rece izing the window do with off the ailment will not be fixed to finish the absolute lent units that are fixed and very easy to understand. They always have the same size regardless of any other alighted settings. They are highly dependent on the output reason why they are not recommended for use on screen because screen sizes very so much. One of the most used is pixels that I used in many examples, being a unit that is related to the viewing device. Other absolute units that are available like inches, centimeters or millimeters. In previous chapters, I used pixels as units, so I will now change this unit two centimeters in the brother. We continue to F elements with fixed sizes, since I'm using an absolute unit. 37. Project #1 - Create a Web Gallery with HTML & CSS: 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 38. Project #2 - Webpage Form: I The proposal This weapons is created user registration form similar to the one presented now containing input fields, namely the name, E mile, gender and finally, user name and password. Being this information submitted by a registration button at the bottom of the page, I will start with creation off the different elements of the page using the HTML code, all the elements of the farm will be placed inside the Deve with class name container in order to allow centering dif and all form elements on the page. So before creating the form I m diff container which at the top contained the text register inserted inside an adding tag. Next, I have an H R tech that in certain horizontal line used to separate the different types of content, namely my entitled and form with respective elements. Now I start my form using the form tech that defines the farm used to get user input. This element receives action attributes that tell us where to send form data when data is submitted for this page. This attribute is not very important because the exercises intended on Lee to create a formally out and not out to receive the data coming from the form. I will then put just a Demi file name in the action at Root. The first thing put field is now added to place the name. So I used the level tag for the first input element to match with the I D. Off the input they are labeling using for disguise Name value in four at root and text name between open and close tech with bold format to appear along with input field that receives the name. The next step is to define the input element using type texts. Debt receives the place. Older attributes. We'd value name text that appears inside input field, working as a shar tint that describes the expected value. And finally, the attributes I d. With name value being equal to the value used into four attributes off the label. Tech two related label with the respective input element. Like I said previously, so is expected that when I click in my label, it jumps to the respective input field. As you can see now individual. To finish this first input element I used to required at route that is used, decide that element Best Byfield out before submitting the farm for this guy's. A warning message appears if the element is not field now, the second input element that receives information from the mail having a cold very similar to the one created previously, I didn't copy this same cult changing in the level tack the value off the fort attributes for email as well. The respective texts in the element input I now receive in the type, attribute the male value to ensure that input value as an email address format into place. Older, I write email, address, text and finally die de email and the required attribute, like in the previous field. Clicking on the level, will make female field active and entering text without the at symbol in the mail field. It's suspected to get a warning telling death email address needs this single, but we'll see the situation at the end. Before moving to the next step, I had to line break tags to give spice between the different elements of the farm. For the next input fields, I defined user gender with male or female value, using the type radio for this input field that defines a radio button to select one off the two options. First, I created my label with the gender texts to identify the type of information that I want from the user. Now, for the first option, I used the radio type with name Gender I D. Male and finally do required attributes like in the previous inputs for the level tech for at Your Roots, with the same name given to the I. D. Tooling these two elements label and radio button for when I click on level, the radio button becomes active for the second radio button. I said it again with gender name, leaving the two radio buttons with the same name so that we can combine the two radio buttons together and get the choosen value. But this is a part off server side programming. Finally, we have the female I D. And for the label we create before attribute with the value equal to the I D. So setting this values clicking. One of the levels will feel the respective choice mile are female. In the last street input fields, I received the user name and password definition that has to be confirmed in the left field . I didn't make a copy off the cold already used having to change to the first guys. The attribute. Far from the libel tech to the value user and writing text. User name to be used s level. Indian put steak. I have the type text with the user name texts in the place older i d. We'd value user and finally, the required attribute to make this field needed. Now the best words for the first input field where the password will be set. I use best value too far attributes and text best words to appear as label into farm in the input tag. I use type password so that the characters are not visible. The place older at roots this time f the enter password texts value, while the I D as the best value similar to for a tribute to end the best word. Repeat fields that as the value best repeats in the far after route and the label texts repeat best words. Do type Attitude reminds passwords, while the place older contains the text repeat password to wind the I D as the value best repeat now to finish form at the bottom, I set a submit button using button tag with type, submit end class rashes that used to define style for this element. I know if all form elements and it's on Lee necessary to define the style for each one. Starting with body, that's I define with Ariel fund family and apply a burly would background color now container that has inside form elements. I defined wit with the value off 50% related to the width off the body and Centre de Steve , using the marching property with values zero and outer giving equal values to the left and right margin. Two F some space between the elements and each side of the container. I used the petting property with value off 20 pixels and finally define white as the containers. Background color funding put elements, namely with type, text, best word and email. I create the specific formats that will not be applied to the radio buttons, which is why I have to declare the type off input elements that will be changed. For this situation, I define input with type dext inputs, type passwords and input type email in my CSS selector, separated by commas being a great methods to choose. Ali specific attributes values. I can now define the style for these elements with the wheat off 95% bedding 15% and stop and bottom margin with 15 pixels and 25 pixels s background color for the input element. I used the color light gray and for the barter property I use about their wheat off one pixel. We'd solid line and caller represented by the exit decimal number BBB to finish. I use the property barter radios that allows to make a rounded corners. Indian put element using a value off three pixels, the Eiger Devalue Doumar, a rounded input fields will be next. I defined style for the class button in order to change the layout off the submit button, giving a wit off 20% big round color green white color to the debts ends up heading off 15 pixels to finish horizontal rule element that is used to separate the title and form that I defined with the bottom margin with 20 pixels to add some spice between this line and the first farm element, I know we have the final layouts being only necessary to do some tests to remember some details that I talked previously, starting by clicking on the levels of each input fields, giving the user access to the corresponding text field, Onley having to write the respective text in case off data to be field. We see the warning message that tell us that fields are military. A message debt was only possible because we used the required attribute. Another detail that I have already mentioned is the use off the male type in the second input field that will be very useful to it in the fire texts with the mail formats, namely, having to contain the at character situation visible. Now where I write an email address without that character receiving an error warning to wind the password. Information that is isn't due to the use off the type passwords that is used in the input element. Thanks for watching. 39. Congratulations: Hello again. And congratulations. You average to the end of discuss. And now you are able to use HTML to write some of the most important contents used in a website that will make you Gento higher level. I hope you enjoy it. See? Went next class.