Code HTML with Valid Syntax

Maximiliano Firtman
A free video tutorial from Maximiliano Firtman
mobile+web developer. O'Reilly book author-15 years teaching
4.6 instructor rating • 1 course • 6,826 students

Learn more from the full course

HTML5 Mastery—Build Superior Websites & Mobile Apps NEW 2020

Easily build 25 websites and mobile apps (including Virtual Reality and Play Store apps) with HTML5, CSS3, & JavaScript

14:29:37 of on-demand video • Updated July 2019

  • Master HTML5 Web and App Development from beginner-level to expert
  • Create your own mobile web apps with hardware and offline access
  • Explore the newest HTML5 techniques for mobile-devices
  • Discover the worlds of Virtual Reality (VR) and social networks with HTML5
  • Reach a wider global audience creating Installed Progressive Web Apps
English [Auto] In this lecture you will learn the basic syntax of the HDMI language. The syntax is basically the set of rules that defines the language. So you will write bitit code. And the other party will understand that code. In this case the other party can be the browser or you can be an operating system. In the case of doing apps why syntax is so important. Well basically because if you don't comply with the syntax your content will not look like you are expecting it will look different because it's like expecting a different language and going to creating a new file like this. OK. I don't go to save that file. So let's start saving the file so we can get there right. Hold preowned the code that Peter. So say I'm going to my age HTML file folder I'm going to get start to section and I'm going to create a new file. Color syntax dot H. TMR remember an HMO document is usually a text document with the HDMI extension. Now that I do have the extension you can verify here at the bottom that should to your code understand we're going to write a [REMOVED]. The next step is to go to a chrome I have here a Google Chrome window. I'm going to say File Open file and I'm going to open that file. So now we are seeing exactly what we are writing in the left. So the basic syntax includes all three important concepts that we are going to cover right now. We have tax we have attributes and we have comments so we're going to go over these topics here in this lecture. So first we are going to start with a doctype. You have already seen these before. So that duct tape is an special tag that must go in the first line of your document. And now it's time you start with the first most important concept a card. It is basically a code representation of an HMO element who is responsible basically rendering some piece of content on the page or on the app. For example a paragraph of text or an image or a video player that's a. We have several tags for different purposes to write it how are going to have a name between what we usually call angle brackets for example a paragraph it's like this. And here we have the angle brackets. So is you basically using the less than and greater than symbols with a name inside. So you should find in your Akiba are were they greater than or less than keys are usually if you have any unusual layout they are available at the right of the M key. But if you have any other layout I mean French or Spanish or or Japanese you need to find how to access those keys because you're going to use these a lot the tag name can be in uppercase or lowercase. For example in this case my paragraph can be a lowercase b or an uppercase B. The common practice in the word community is to use shust lowercase. So it will be a good idea and she has a stable labor case. But just remember that it has nothing to do with the syntax. It's just with a best practice so to normalize code we are writing ational between different developers. So the only important part here when you're writing tags like for example the paragraph or there is another time for I m g like this. I am just tagged for rendering an image on the page is that you must not of spaces between the open bracket and the tax name like here. That's based there is wrong. In fact you can see that the editor of this case Beasley's to Yoko's Union error if a Hoeber with my mouth if I go to my mouse to the error or. Ischemia a message indicating that you should not you must not add that space there. That's a usual error when you're starting with so don't add spaces there. You can add spaces after the tag name but not before. There are some tags with content inside. Usually in the form of text or other attacks for example if we use the title doctor that that town that we have racing before we mast texting inside for that then we're going to use an open tag. And also it doesn't die it goes into areas using the same name but it starts with a forward slash. In fact if you pay attention here when you open the Tower you'll see that the code is already giving me a suggestion here. If if I want to basically close the title and exactly that's what you want so I would just press enter and between the opening and closing time we're going to write the title of this page. And these cases Asian multiplexed. Just remember also don't add the spaces. In this case before the forward slash cost that's not correct. That's not the bad syntax. Other attacks on your site are empty so they don't have any content or they don't have any other attacks inside. For example I UMG I am she is attacked for representing an emotion on the page like a logo or like a photograph. But probably you are thinking. But if I can find the content for the mash how the browser will know which emerged to surrender inside. And that's basically our next concept. Audience so it can contain one or more attributes inside. I think you just go within the opening tag before the close in angle brackets and after one space I think you'd have a name and like with tags we have to kind of them we have that with values and also empty attributes. So let's start with the rule with values for example in this case for the EMAC we can set that sort of S R C is the name of the as the world for the in the name of the emotion. So if we have a photo for example we go into the find the name of the attributes the equals operator and within quotes the name of the file. For example it can be profile. Che pay and that's should be a file in my file system. So that's how we define one attribute. If there are other out the rules we use a space. For example I can set the width of these E-Machine like this in let's say for now it's pixels. So now we have one image with two adjectives source and with. So you should not use spaces before or after the equals operator. So this is wrong. It's not going to work. So no spaces after or before the equals operator and the same usually also applied inside the quotes. So don't use spaces there. OK so you can see that I'm using double quotes. So the extremophiles standard also accepts single quotes or even no quotes on some specific situations. But the best practice in the communities is to use just double quotes on every as they would by some other attributes are empty. So they don't need any value. The presence of that I would means that you want that behavior and the absence that you don't. For example there is an input tag available but basically creates by default a text imp type. So if I save my file I can now refresh here. OK and now you can see I haven't broken a match. We will work with that later. That's because I don't have that file. And they have an input. That's an email so I can type for the input tab. We can specify for example that this is or requires you to do that. We are going to use an empty attribute also known as a boolean attitude. In these cases require. So there is no equals symbol. There is no body. So now you know what it is. The basic syntax of tags and also the basic syntax of attributes inside tags. No let's talk about Colman's doing just Kurs you will learn a lot of things and sometime pre-pubertal you want to add some notes for yourself while you're writing code. For example it's explaining here that there require an interview. It's an empty attitude. That's why there is no value. So how can you achieve these without actually to render the text in the app. So for example if I want to say here require is an empty ID view. So that method appears. It's been rendered in the browser and then the one that because it chaff Goman for myself a [REMOVED] offers us a comment that has a section inside your ratio that is going to be ignored by the browser or using any special type. It's like the doctype. So we open it high like this like angle brackets. But then I'm going to use exclamation mark dash dash and then I'm going to add a space and I will add another dash dash and are a pair of dashes and everything in between. It's a comment you can see that is to the code is changing the color to green. That's because it's a common. So now I can copy or just dry my text so I can copy and paste or cut and paste the text inside the comment. Now you can see that if I say my file and I refresh it's not there anymore but it's still inside my source code. We're going to split the common in different lines. Right. This is a multi-line comment. So this is the syntax of Terminal 5. The next thing is to talk about validation.