In this module, you’ll get to grips with the basics of HTML, starting with its history, the fundamental pieces that make up HTML, and how to use attributes and comments properly. After this, will take a look at how containers work, how websites respond to syntax errors, and what a few of the special characters look like in html. Finally, we’ll end off with a deep dive into structural html, and how you can use it to create systematic, well thought out websites easily and effectively.
Some tags can have a few attributes that changed the way they function. Attributes are included with the tags and add new functionality to the tag or sometimes allow the tag to work in the first place. These are really useful and will help you create more flexible websites.
So what are these attributes and how can you use them? There are two kinds of attributes required and optional. And attribute values should always be inside quotation marks. So when would you want to include either kind of attribute? Most attributes are optional, which means that they may or may not be provided by the developer. In most cases, a default value is given to any optional attributes, even if it's no value.
Required attributes on the other hand must be given a value for the element to work properly. Here are some examples. Any element can have an id attribute. This is optional. If it's not provided the browser will use the default of no value and the element will display as normal. Form inputs generally have lots of attributes, that can be set. In the case of an input element, for instance, if no type attribute is set, it'll default to the value of the text. To display an image, the image tag is used. This must be supplied with a value for the src attribute, which is usually the URL of the image file, otherwise, the image won't display properly.
Okay, so that's it for attributes for now. Let's quickly talk about comments. Now, these are really useful from a coding perspective, because it means you can add comments into your webpage, but these aren't ever displayed to the user. These are especially useful during development because you can include questions, or ideas or problems you've run into in line, in the code. And your stakeholders or fellow developers will know exactly what you're talking about in the context of the HTML page itself. Making a comment is really easy to do.
All you have to do is open a bracket, like this, followed by an exclamation mark, and then two dashes. Then add your comments in. I'll use something like, a demo that comments can be used to clarify HTML. And then we close the comment off with a double dash and close the bracket. Easy as that. Now, imagine you're creating a web page with a form in it. Maybe you're not sure which of the form data is required and which is optional.
You can use comments to ask for help or make a note that you aren't sure what to do. But there is one last thing you need to remember, and that's that comments always need to be removed before deploying the web page, because it's still actually accessible in the browser if it's saved in the HTML file. And that's it for this quick intro into attributes and comments. They're powerful tools to have in your HTML Arsenal and will help you create flexible and interesting web pages.
Lectures
Ed is an Outstanding Trainer in Software Development, with a passion for technology and its uses and holding more than 10 years’ experience.
Previous roles have included being a Delivery Manager, Trainer, ICT teacher, and Head of Department. Ed continues to develop existing and new courses, primarily in web design using: PHP, JavaScript, HTML, CSS, SQL, and OOP (Java), Programming Foundations (Python), and DevOps (Git, CI/CD, etc). Ed describes himself as practically minded, a quick learner, and a problem solver who pays great attention to detail.
Ed’s specialist area is training in Emerging Technologies, within Web Development. Ed mainly delivers courses in JavaScript covering vanilla JS, ES2015+, TypeScript, Angular, and React (the latter is authored by Ed) and has delivered on behalf of Google for PWAs. Ed has also developed a new suite of PHP courses and has extensive experience with HTML/CSS and MySQL.
Ed is responsible for delivering QA’s Programming Foundations course using the Eclipse IDE. His skillset extends into the DevOps sphere, where he is able to deliver courses based around Agile/Scrum practices, version control, and CI/CD.