 Welcome to part three in this lecture on HTML and now we go into a bit more advanced constructs in HTML, so things that usually are more than a single tag but a combination of things and The most basic one is of course a table. You might want to display information that is an intabular form And you can do so using the table tag Just as a word of warning in the past tables were used quite heavily for layouting because you can of course make sure that if you have Two columns then the first column is to the left of the other one and so on So they are kind of suited for that, but nowadays you would Usually not do that. You would use different things which we get later to So the idea is really just to display tabular information Tab tables can have three tags that are optional. They can have a tag indicating the body So kind of the content of the table the heading Sort of the title what are the title row? What kind of different column names? Do you have and the footer? You don't need those things, but they sort of add semantic information They tell the browser that okay everything that's in the body is body information in the head is Heading and that can for example be used for for styling later on you might want to give the heading a different look for example All the all the columns are bold-faced And the body is just regular. So that's usually the purpose of that But then the most classical things that help you to structure the table are the TR, TH and TD heading tags sorry TR defines a row in the table. So simply a horizontal Space TH is Cell in the header. So if you have the header tag you can use the TH to define the the cells the columns If you are anywhere else you use the TD instead So that's just a cell and then you can have a caption to give it a Nice caption that describes the table now the best way to demonstrate this is to have a look And we do that by going to the fourth file here. This is just a table example And here I'm using the the entire I don't have a footer Okay, but everything else I have so you see that I start with a table tag it ends down here And ideally I should Change the indentation here Then I have a caption that says my table. So that's sort of the description of my table I have a header That says okay. Here is here is sort of the title row and in that I first define a row And then two cells so first name last name And then I have my body Again, I have one row and I just have two cells saying Stating my name. So this just gives you a table that somewhere has a description It has a title with two columns and it has a content part. So if we look at that You'll get this very boring table Here's the caption. This is the first title column the second title column and then content If you want to add to that you could just add for example a new row. So I could just say TR and then say Whatever John Doe and you'll see that I'll get another column. So this is a very straightforward way to Display tabular information and you'll note now that there is no no borders here. There's no styling So it doesn't look very nice, but again the styling will come later. So it's really CSS study is useful styling So the only important thing we need here is is the information displayed in the right way and that's what we have It could however manage Happen that if you use a different browser or a different version of Firefox that for example The borders are there by default. So that really just depends on the browser and this is exactly the example I have in the HTML file Now tables are nice They're useful quite often But one thing that is much more useful even though at this point in time You maybe don't see the purpose are so-called divisions or divs Divisions are containers there is it's just a invisible container by default and They are so-called block elements. We'll talk about that later But it basically means that if you start a diff tag It causes a line break and it uses as much horizontal space as possible. So it basically just blocks the entire Horizontal space and within a diff you can just have regular tags as before so if you look at this example I'm just defining a division and within that I just have a header and a paragraph. That's it This is fairly boring. So You'll see that These Divisions here. They are basically just blank text. So you will not see much difference to just having paragraphs If we just look at that We'll see that here. This is exactly the same as just using paragraphs nothing special What I do then Here I'm already going to lecture five. You don't have to understand what this means But I basically define colors just so that you see that they are actually different boxes So I'm using different colors for the different diffs different background colors But otherwise, it's exactly the same as above and you'll see the difference So you see exactly that this is actually one box. This is one box. This is one box and this is one box And as we have discussed you also see that the box goes the entire horizontal space if I re If I resize my window, you'll also see that there are no scroll bars coming So it's not it's not like this box is this large, but it just adapts with my window So that's a diff These diffs are really useful because again of styling later on we can basically Define the own style for each diff And that's them one of the main things that is used for layouting So diffs nowadays have replaced tables for for the purpose of layouting almost everywhere So whatever you want to have a specific part of your page that looks a certain way you would use a diff in many cases and That's because CSS next lecture can be used for coloring resizing positioning and so on You'll use this heavily later on so the first assignment Will definitely be lots of diffs that you somehow have to style using CSS So these are very simple, but extremely powerful because they can be adapted so easily So as I said here diffs are block elements and it's maybe important to do a small excursion to what that means Most elements in HTML are either these kind of block elements or so-called inline elements And they have two distinct behaviors a block element similar like as the diff Starts in a new line and it takes as much width as much horizontal space as possible So you see here these are two diffs and you see that they take all the space and they start in a new line inline elements are Different they start from where you are right now and they only take as much space as needed And one of the examples is spam that just text It just a text span, but it's an inline element and you see here these are two spans and The second one just starts directly after the other one There's just one space in between and then you have the next one and I also did some coloring here So you see that these take only as much space as they need not more So that's a very important thing And I'll have it in file 7 So that's exactly what I displayed you see that there are two diffs with two different colors and there are two spans With two different colors and it's just a line break in between and what you see is exactly what's on the slide So you see that there is here all the space is used and there's a line break here only as much space as needed and no line break and again This is important to know because later on when you will adapt how things look or how they behave It's important to know for for the layout thing how the elements behave Because if it's a block element, it will always take all of the space. So if you change it It might behave slightly different. So that's an important concept to understand Now as a last part in this series we do forms and Forms are what you see whenever you log in somewhere whenever you use a contact form These are things that are used to collect inputs. So it's the classical thing That you for example sport when you go to Google, this is a contact form So something and not a contact a form in general It's something where you can put in text and have buttons and so on so contact forms are Used to collect input of any type and typically that's input fields like text password buttons checkboxes Text boxes and so on They are a bit tricky to understand but in general it's the form tag So you start form and you end it somewhere and in between you put everything you want to have there So we just ignore this up here for now But you see that here I have a form in there I have an input field of type text. So that's just text input and I give it a name That's not so relevant for now, but that's important when you want to use it for something Later on and the same you can do for example with password. There is an input type password That's just instead of text. It does not show the text, but it gives you these dots And then you have a type that is submit. That's a button. Basically. It's a submit button and It has a text so the value is login. That's what the button displays and when you click on it something happens and this whatever something happens is Really what we get into when we do JavaScript when we do behavior for now We just display things and this form won't be very useful but That's what it'll do. Now. Let's look at the details here Action and then we have a URL This basically means that if the form is submitted if someone clicks the submit button We will Call this URL. We will refer and we will request this URL And we will use a certain method and this if you remember are the different HTTP methods So here we can do in HTML. We can use get and post Get to receive something post in general to post to create or to change something Maybe not that important right now, but these are the two things you need to specify So basically you need to specify the HTTP request. You need to say which method and which URL Then you have to submit button as I said, that's the one that when you click it it triggers this HTTP request And it can have an additional behavior JavaScript usually Now the name here that I've discussed that's the variable name So when you later on in JavaScript or in any other language You want to process the data that the user has sent You have to use these variable names. So, you know that you will get This URL will get a get request with Request body that has a user and a password variable. So that's important to know So to summarize what this form does is that whenever you press the submit button You do an HTTP request that goes to this URL Using the get method in this case And it includes the form data. So whatever the user has entered here with the specified variable names So that's what happens And we can look at this. I have exactly the same Stuff here. I have only added a proper URL, but that's Maybe not that important. So right now. I just reference the same The same page so whenever someone clicks submit it just end up on the same website If I open this you see that here is my form I have username and then I can add something I have password and if I do something here, you see the dots and whenever I click submit You'll see that this just reloads if you pay attention. You'll see that there was a quick Reload where basically that's just Reloaded the whole thing Okay, so that's a basic forum Now you can add a lot of different elements And I'll just show some of them here and this is really something to play around with a good reference for this Is for example that the first two literature references I've given in this lecture So that you get an overview of all the different things you can do You have already seen the input field. So that's to add text. You have seen the submit button to submit And then there are other things you typically see for example a radio button. That's simply input type radio Again, you have a variable name and you have a value which is Whatever is submitted in the body. So if someone now selects user and submits in the request body in HTTP, you will get role equals user You can also have checkboxes, which are just like these multi checkboxes. It's the same thing input type checkbox And again variable name value same thing Then we get a drop-down menus. These are the select tag and here I give a name a Variable name to the entire menu. So That's the variable name that will be included in the HTTP request and then you can have different options So here I basically add two options. You can select the car either Volvo or a Saab And depending on which one you select the request will have a different value for the variable So if you select Volvo, it will be cars equals Volvo. Otherwise Saab as simple as that Finally you can disable elements if you just put in disabled and At this point in time, that's not very useful. So you cannot modify them them But later on when we use JavaScript, you can of course enable or disable things. So for example, you could Enable the submit button only if the username is put in or things like that Or if there is no valid email address you disable the submit button or things like that So that's a typical thing if we look at File six forms here. You see a selection of all of these things There are also a number of other things That might be interesting to you So Let's have a look So here you simply see a form that has different kinds of things. It has a username password as before you see that I disabled this one Kind of change it here. I have my drop-down menu. I Have a Radio button group so I can only select one of the two Text box that you can actually resize and these kind of check boxes here and then you can submit this Apparently I have specified some URL that does not exist Yeah, so eight forms dot html does not exist and that's why I get when I submit I get an error So maybe I should change this to six forms and now when I submit When I submit it will just reload this page So That's all forms work number of other things that are essentially in the In the html file as well. So you have seen the text area. That's the text area tag You can define how many rows and columns it has but this can be modified as you have seen you get this little button to resize You can also provide labels for an element so you can say Give me a label for the field with With id user and then you have the input that has this id So then you you make sure that the label and the input are actually paired. They belong together And finally you can group things together using these field sets Which basically just make sure that? Parts in your form are grouped. So if you look here Wherever my form is You'll see that I have these two boxes I know one box only with user information So this simply means that there is a field set and these things somehow belong together If we look into the code, you'll see that I have to find the field set here And I have to find a legend basically an explanation for this group Okay, as a last part You have seen this method here get and html allows you to use get or post to send the HTTP request and Essentially, there are two different they differ in how the variables here are included ascent and When you use get what happens is that the variables here are actually appended to the URL so I've simplified this so far, but The truth is That they are actually not in the in the request In the request body as I've said But whatever I submit here So let's say I put ASD ASD and ASD in the username if I submit you will see that here something has happened And that's what happens when you do a get request in a form The variables are added to the URL and if you remember lecture two this question mark is the query part of the URL So this was additional information. We basically have added the Variables as part of the URL. So now you see username equals ASD password equals ASD ASD And you also see here, of course that the password is clear text. So it has not any how disappeared If I instead do post so I have the same file here. I have just changed the method to post Then you will note That if I do the same thing again, and I press submit you do not see the stuff up here so instead of adding it to the URL the Request is sent in the body and I'm not sure we can see this here. We probably cannot but let's No, we cannot see that here, but You'll have to believe me that the variables are still there. They are just instead of the URL We have put them into the body of the request So this is what I said before this is what happens when you do a get when you do a post The URL does not change. It does not get any additional variables Okay, so that's for this part and then in the fourth and last part of this lecture we cover Things like semantic elements accessibility and other concerns