 We've already covered all of the essential tags that you're going to put into the content of your webpages that is in the bodies But here are four more that are pretty essential to know except these all go in the header first There's style which we've already covered which is really just about including CSS rules and then there's the script tag Which is for including JavaScript code and there's the link tag which is for linking and related resources Which is sort of a generic catch-all We'll discuss in a moment and made a made the tags are simply made a information about the page The most common use of the made a tag is to throw an extra information in the page So that search engines like Google can see what the keywords of the page are For example looking back at the source code of the New York Times page. We saw You'll see in the first half of the header here. There's a good number of made a tags Including one with a tribute name equals keywords and an attribute content equals politics and government Manhattan Christians and Christianity Muslim-Americans Tea Party movement Administrations etc etc etc those are all just keywords which are intended for search engines like Google So when Google crawls the New York Times website and encounters this page you can get some idea of what this page concerns That anyway is the most common use of made a tags. There are a few other uses. We won't get into The most common use of the link tag is to link in style sheets That is files of CSS rules because you can include CSS rules as I showed you already With the style tag put inside the header of your page But more commonly if you have a whole bunch of CSS you're going to split that off into some separate file Which you would probably name something like site dot CSS and you'd place it somewhere on your web server and then Using the link tag link to it so that when your web page is downloaded Uses web browser also knows to request this file of CSS rules, which it then applies to the same page So here in this example the link tag has an attribute rel which stands for Relationship as in the relationship what kind of relationship this linked resource has to the page in which the link tag is included in this case the linked resource is a style sheet and Then the type specifies again that this is CSS and href Again hypertext reference That's simply the URL of the resource in this case the file of CSS rules Now you may object here that this URL site dot CSS doesn't look like a normal URL Well, what's going on here is that this is a relative URL rather than an absolute URL and Absolute URL like an absolute file path is fully written out like we expect But a relative URL like a relative file path is incomplete and the full URL the absolute URL is inferred from context and The way that works is when you see a relative URL in a web page like saying a link tag The browser takes the absolute URL of the page itself Hacks off the part after the last slash and then appends the relative URL So for example if our browser downloads the page example.com slash stuff slash junk slash thing dot HTML and In that page, there's a relative URL that just reads site dot CSS Then the way the browser interprets that is as a URL point into example example.com slash stuff slash junk slash site dot CSS Now the thing to keep in mind here is that though URLs Superficially resemble file paths. They really aren't because on the web server here There's not necessarily any directory called stuff inside which is any directory called junk There's no necessary requirement for that to be the case at all, you know What the URL means is entirely up to interpretation by the web server However, it's very common in websites to somewhat imitate that Directory structure when it comes to designing the structure of URLs for the site so relative URLs are often quite useful and In fact, you can also use dot-dot in your relative URLs and it works very much like with relative file paths So if we're on the page example.com slash stuff slash junk slash thing dot HTML And we have a relative URL on that page that reads dot-dot slash site dot CSS Then the browser interprets that as not hacking off everything after the last slash but hacking off everything After the second to last slash so we end up with example.com slash stuff slash site dot CSS Again, this is a superficial imitation of relative file paths and absolute file paths, but Just remember that the similarities end there a Form in a web page refers to any combination of text boxes check boxes radio buttons pull-down menus etc The idea of web forms is that the user is prompted to fill out certain information like fill in text boxes And once they've done so they then hit the submit button That submit button is like a link to a URL With the difference that the information filled out by the user in the form gets tacked on somehow either in the form of a post request or In a normal get request with all that information Appended as get parameters get parameters if you remember mean take a URL And then at the end you tack on a question mark followed by key value pairs named value pairs separated by ampersands those are get parameters So here for example, we have a form tag and in the form tag We specify the action meaning the URL Which the data is submitted to when the user hits the submit button and The method attribute specifies how we're going to send that data Is this gonna be a post or a get request if it says post then the data is sent in the body of a post request To the URL which here is the relative URL page dot html The content of a form can be anything you like But the actual form elements the things which have the data which we're going to send those are called inputs So we have input tags and for each input we specify what kind of input it is text here means that it's a text box checkbox means it's a checkbox obviously and Type submit means that that's the submit button Which by default just has the text submit query though you can customize that it doesn't have to read submit query You can have the buttons say something else So the key thing to understand here is that the form tag itself is not really like a visual element It's just a logical container for a set of inputs and when you submit the form All of the data entered into those inputs in the form are what gets sent You might have a separate form on the same page But those two forms are separate the inputs in one have nothing to do with the other form In any case you can see in the example I've written as the user of the web page I've written hello, and if I were to click on the submit query button Then that would send a post request to the URL page dot html And the body of that post request would include two values you would see Bob equals hello and Carol equals blank because I didn't check the checkbox If I had checked the checkbox, it would have the default value Carol equals on In any case forms of the primary means by which data entered by the user on a web page can be sent to the web server Finally, we have two last notable tags There's the object element for embedding plug-in elements most notably flash elements and Then the iframe tag I here standing for inline as an inline frame Refers to an element which itself is a separate HTML document Something which is requested as a separate document, but then displayed as an element within some other page The use of iframes is somewhat frowned upon. It's certainly something that can be easily abused For example iframes are what you see when you get pop-ups, but in a few contexts They are genuinely useful So we're not going to say anything in detail about objects or our frames So there's something you may wish to read up on and that concludes our coverage of HTML and CSS In the supplement for this unit, I'll add some coverage of some stuff we glossed over a bit too much Like say some of the more advanced CSS selectors So now that we've covered JavaScript in itself as a programming language and also now is HTML and CSS in The next unit we can talk about the combination of the two how to use JavaScript in our web pages