AI and the future

What is the future holding to us? AI? Are they taking over? What is AI? Are they dangerous? Are they good? Are they really more intelligent to us? Are they similar to us? Do they pose any threat on us? Are all of these movies that says they are threats are real?

Wowowah! You are kinda overwhelming me with all these questions? What is that you are really worried about.

I am worried about the AI taking the universe from us?

Good, now I understand. Are they taking the universe from us? Well, according to Bill Gates, in the next 50 years, the AI is going to read a book and sit an exam, scoring more than a human. We know that IBM’s deep blue has been able to defeat the chess’s champion, Kasparov. And Google’s AI chess bot, AlphaZero, was able to defeat the world’s leading chess program, Stockfish 8, after just 4 hours of training. So, where is this taking us? What are the implications how is the future going to look.

Well, first of all? Is AI bad and evil spirited and do they want to take our position? They don’t realise their existence from the lack of it and they are just doing what they are programmed to do, but their programs are not based on a digital input and output, meaning there are no if conditions, they are judged more on results, rather on being given the exact steps of how to do it. Based on the results, they will alter the weights on their neural networks and hence alter their behaviour. But, they don’t know what is right or wrong, we know it and we teach it to them and based on our results, they would have to alter. So, they are really not defining their purpose, we are and we are setting the criteria, not them. So, their is no element of bad intention there, since we control the inputs and the outputs and hence the behaviour. But, this is true now, is it always going to hold out to be true? Yes, AI will always be our creation and we will always control the inputs and the outputs and the success criteria. It has no way to determine that for itself and so, and it will always remain under our control and it will do what we taught it to do.

That is a big sigh or relief. We are safe, then. Right? No, we are not.

AI is a pretty advanced tool that is doing what we want it to do, sometimes far better than we can. It will be competing whether we like it or not in the marketplace. Have you ever heard of a robot complaining that it had to do too much work? Have you ever heard of a human doing it? You get the picture. Put yourself in Uber’s shoes while it is choosing to use self-driving cars for their trips. Their customers will not complain about them and the they will not complain about Uber. Generally, less headache and more output which translate into top dollars for stakeholders. If they have to lay off all of Uber’s drivers. So, be it. This means less trouble, more customer satisfaction and better sustainable business models. So, even though it is doing what we want it to do, it is obeying its master and growing in intelligence everyday, training and working relentlessly and competing in the market which would lead to many lay-offs and less job security.

In the sixties, nobody had to worry about his job position. He always knew he had it, now the market is fiercer and one had to continuously upgrade himself to remain in the market. With aggressive competition from AI, job security will grow less and less.

A self-driving car is less likely to make an accident with another self-driving car, since they are connected to the same network. An AI robot doctor is less likely to be out-of-date in its information, since it receives all its information over the internet. True, a wrong update can cause millions of lives to be lost, but they are far more less easy-maintenance than humans. It is true that the mere survival is going to be a challenge with these AI robots around and whoever is lazy or has below average IQ, has less chance of surviving with AI around. And therefore, you are right about them posing a threat, but may be less right about them being evil-intended. In the globalisation, free-market era, AI is going to compete with us in the marketplace and there is so little that we can do about it.

Oh! Is the future going to be so gloomy? And, why compete with them? Why not sit back and relax and enjoy them serving us. After-all, with all doing all the hard effort, there will be less of a problem with finding food, they can it to us and there will be less wars and competition for resources with them figuring out to us all the answers to the hard questions. We can just sit back, relax and let them figure it out for us. Well, this is not as easy as it sounds. AI cannot figure out for us anything, we are the one that has to figure it out for ourselves and we are having trouble figuring it out for ourselves. And, in order to figure it out, we will have to work. And as we will attempt to work, we will have to compete with everything being automated more and more everyday and it is true, the world is going to be more comfortable in many ways, but it is equally correct that it is going to be more demanding in many ways. So, the challenge would be with our lives being so much more easier in many ways, and every reason is given to be lazy, there is a far less chance to be lazy especially that people who are not, will have far more rewards and possibilities.

We are talking here about TV’s which will monitor your face expressions, determine your tastes and customise it shows us based on that. How difficult is it going to be to keep yourself and your kids away from this TV and do some work. And at the end, if you don’t do some work, I am sure, it will be easier to find food, but imagining the second level of luxury that you could have if you do, makes it very difficult not to work! Also, imagine how would AI interfere in government policies. Imagine, the borders of the U.S. protected by a virtual Google wall that would use the AI to fire bullets against whoever steps across the border. Imagine AI making budget decisions for governments. As impressive as it may sound, you would tend to wonder, where do humans fit into all of this. And you are right, they don’t, unless they really want to. Which is why in tomorrow’s world, if you don’t show interest, you are very easily forgotten. And, who wants to be forgotten?!

So, what does it mean for me and how can I prepare my forward for myself and for my kids. Good question! Be mobile. Learn a new thing everyday. Make it a point to step out of the comfort zone. Corona is a good test-run for a very competitive market, the future is going to be far more competitive. In tomorrow’s world, you are going to have to be an entrepreneur even if you are an employee. So, take risks and follow your way through and make it a point to exhibit toughness and show your strength every new day. This is the only way you can survive in tomorrow’s world.

I loved writing this blog for you guys. Please, like and share and show me some love. I would love to hear your thoughts.

What is the difference between a senior and a leader?

I know I am technical person and supposed to be talking about technical stuff, but every once in a while, I can’t help but to address some of the soft skills, that are necessary for your survival in the market.

This question is a very tough question and not an easy one to answer. I remember I have been asked about this question in an interview and my answer was toward, “the human aspects”. Made me sound more of an Anthony Robbins kind of life coach rather than a technical leader. Didn’t help get the job and even now as I write down this blog, I don’t know what I am going to write exactly. This question is that challenging and this might be the reason why I find it attractive.

I have undertaken leadership positions in the past and I never really had the time to ask what a good leader is. It is sometimes easier to act on the spot than to reflect. And even though the human aspects is something that would make me sound like a motivational speaker, good leadership definitely involves that. Let us take Steve Jobs as a good leader. He is a visionary and his power comes from setting high standards and believing they can be achieved and letting you believe that you can do it. He deals essentially with emotions and can influence you at an emotional level. This is what makes him a great leader. Because you being technical, doesn’t make you the leader of machines. And one of the the greatest challenges that you note when are in a position of power and responsibility is your own self doubts. First, when you are just a technical guy, you are expected to perform well, period. As a leader, people look at you, they imitate you, you set the mood for the whole team. And therefore, this is one of the things that you should take note of as you become a leader and these are the common pitfalls, that you shouldn’t run into:-

  1. Be humble enough to take the opinions of your team and strong enough to enforce your vision according to what is best to the project. Never be strong-headed as to say your opinion is the right one and expect everyone to move out of your way. This is because in the team, you would find one or two if not all of them, finding your position desirable and willing to jump on your chair and take the lead from you. As you start admitting the door for opinions, be clear about you being in charge and there is no dispute about that. Unless if you start giving them more role than necessary, the project is bound to fail. You might be okay with it, but they won’t. So you being in charge and having the upper hand works well for all of you.
  2. Find ways to enforce your vision: Don’t think it will happen on its own. Once you are settled on something, use whatever you can to enforce these rules. It is easier not to follow rules and standards, but once things get sloppy, it is too difficult to reverse this pattern. Remember, you want to set patterns from the very start and this is usually easier than setting an easy tone, than trying to change it afterwards. One more thing to take note of, discipline usually is what creates success and if you are not well-disciplined yourself, it becomes very difficult to convince others to be disciplined. They might do it, but they wouldn’t like it. And if they don’t like it, it would reflect in their output whether you like it or not. Always prefer automation over manual enforcements. First of all, it is more consistent, second of all, people tend to take it less personally. Tools like Lint and the like could help.
  3. Be a friend, but keep your distance: It is always good to have a funny laughter with your team. After all, no one likes a haughty leader. However, make sure that you make your team respect your private space and use this private space for the good of the team. Remember, everybody likes success and you as a leader will be judged on whether you make your team succeed and if you can’t make them succeed, they wouldn’t like it because you are a good friend. Even though it seems like it could work, I can tell you from experience that it wouldn’t. Being a friendly leader is not something that will make you succeed but being friendly and affirmative will make your team like you as well as give you the power to make them jump into action whenever is required. This is very important especially when you use this personal space to establish the technical vision of the team. Look for new tools that make you get the job done in a better way. Always be on the edge of technology and be on the top of what you are doing. Because as fancy as it might look, one of the most painful experiences in life is to have one of your team members direct the vision of the project. Even though it might look like less work, one of the most important quality of you as a leader is to have a technical discussion with your team members and management enlightening them with your vision. This is one of the things that would make them respect you as a leader. It is equally important to be able to talk about what you do as to do it yourself. Remember, you are not a sales person, you are a technical leader. But a part of your job is to market yourself as a knowledgeable, intelligent entity and there is no way around it.
  4. Standup for your team: How many times have you liked your leader so much but you couldn’t forgive him when you didn’t protect him when he needed you. Blame yourself and don’t blame the team. Always be prepared to do it. You don’t want to make your team feel exposed and vulnerable. Getting the support that they need when they need it is something that makes them value you greatly as a leader.
  5. Be transparent: It is always better if you go to a management team and talk about an accomplishment. But, you don’t want to set the expectations too high by talking about accomplishments that never really happened and then have them panic when they discover the real status. Because the real status is going to be known whether you like it or not.

This are just some of my thoughts about what makes a good leader. Can’t wait to hear your thoughts. And until I meet you next time, have a great time.

Bootstrap is too heavy!

Do you use Bootstrap? Do you not use Bootstrap? Is Bootstrap a good framework? Hmmmm.

First of all, what is Boostrap? Boostrap is by far the most commonly used CSS framework. It supports SASS and LESS and comes with its own Javascript library that helps us create fancy interfaces, modals and sliders. Sounds great? Right?

Well, it does and indeed, it is a great framework built by twitter and I think that in the past five or six projects, I have used Boostrap. My only concern with Bootstrap is that we, in almost all projects, rarely use five percent of its features and most of the time incorporate this huge framework, causing performance and maintainability issues. Please, let me know if you have ever used Jumbotron. I know I haven’t.

So, should we not use Boostrap? No, please, do use it! But, customise it to your needs. Only, download the features that you want to download. Because, Boostrap does offer you this feature for 3.x: https://getbootstrap.com/docs/3.4/customize/

You don’t need to include anything in your code that is not needed and pay a heavy performance price. So that as much as the Bootstrap is necessary for things like responsive and so forth, I don’t like to include the whole framework just for that. For me personally, I prefer to download just the grid of Bootstrap. I think that this is more than enough for my needs and I can use my own custom classes for the rest. Note that, the Bootstrap classes can be very annoying from a maintainability perspective.

It had been a pleasure writing this blog for you guys and I wish you guys will share your thoughts on this one. How do you normally use Boostrap? Do you find a good framework? Would love to know :).

Build a simple NodeJS server and consume the data in ReactJS

Today, I am going to teach you how to build simple Node Server and consume the data using ReactJS. This tutorial is good for beginners. If you are an advanced NodeJS and ReactJS developer, stay tuned for other tutorials which might be more suitable for you. You are still welcomed to read it of course to give us your valuable feedback.

If you have no Node and npm installed, please install them. You can install them by following this link: https://www.npmjs.com/get-npm. if you are in doubt whether you have npm installed or not, a good way to check is by typing in the following command:-

npm -v 

If you don’t see an error, then you are good to go. Now, you are good to go. I would use Microsoft Visual Studio Code in this tutorial. If you haven’t already got one, please, download it from here: https://code.visualstudio.com/download

Create a new folder any place you like and open in Visual Studio Code. Create a new folder in Visual Studio Code, call it src. Create a file and call it “app.js”. See the highlighted part to know where you can create a new file or folder.

Now you would need to install express and cors:-

In Visual Studio, open the Terminal. Terminal => New Terminal and then type in the following command to install express,

npm install express --save-dev

To install cors, you would need to run this command in the terminal

npm install cors --save

All you need to do now is to write the code. Open your app.js file and write the following code.

const express = require ('express');
const app = express ();
let payLoad = [{name:'Magdy El Bahnawy', status: 'enrolled'}, {name: 'Lotfy Samy', status: 'enrolled'}, {name: 'Ahmed Ibrahim', status: 'graduated'} ];
app.get ('/students', (req, res) => { res.send (payLoad);})
app.listen (2000);
 
node src/app.js

If you face any issues and you are using Windows, try to run Visual Studio Code as an administrator and if you are using MAC, type in sudo in front of the command that is causing the error. If this doesn’t resolve the issue, don’t hesitate to contact me and I will try my best to resolve your issue. Now, if you go in your browser to the following url: http://localhost:2000/students, you shall be able to see some JSON object in your browser which shows that you have actually built your first node server app and it is up and running!!!

This is awesome! Now, let us write your first React App to consume your output:-

In Microsoft Visual Studio Code, open a new window: File -> New Window

Create a new folder and name it React and open it in your new window in your Visual Studio Code. Open the terminal: Terminal -> New Terminal and copy paste the following commands:-

npx create-react-app my-app
cd my-app
npm start
 

You should see something in your browser that resembles this. If the browser doesn’t open automatically, just type in the following address in your browser’s address bar: http://localhost:3000. If the commands above fail to execute, run sudo if you are running it on MAC or Linux or if you are in Windows, try running Microsoft Visual Studio as an administrator. Always, feel free to reach out to me with questions when and if needed.

Now, in the src/App.js, type in the following code:-

import React, {Component} from 'react';
import './App.css';

class App extends Component{
constructor () {
super();
this.state = {
response: []
}
}

componentDidMount () {
fetch("http://localhost:2000/students")
.then(response => response.json())
.then (
data => {
this.setState({response: data})
})
.catch(err => { console.error(err) })
}

render () {

return (
<div className="App">
{this.state.response.map(student => <div><span>{student.name}</span><span>&nbsp;{student.status}</span></div>)}
</div>
);
}

}

export default App;

On the screen you will be able to see something like this:-

Congratulations! You just have your first React app consuming its data from the Node Server and displaying it on the screen. Will be waiting for your questions and feedback.

Angular Component Factory

Angular Component Factory. What is it? When it can be used and How to use it.

The pre-requisite to this blog is for you to have some background of the Angular Framework, what it does and have some working experience of it. If not, maybe this blog is not for you. Stay tuned, as we will have some blogs that walks you through Angular step by step. This tutorial expects for you to be of intermediate Angular level.

Angular Component Factory is exactly what the name implies, it is a factory that creates dynamic components. So, you can programatically create components rather than him them sitting in the template. When you see the template, you don’t find HTML code for them, however, when you open the ts file, you find some logic to bring them in or out of existence.

Why is that useful? Well, it is useful because sometimes, you would need to do exactly that. Remember, Angular is all about components. In the Javascript world, you would manipulate the DOM, by using some code like:-

 document.getElementById('container').innerHTML = 'new dom';

In Angular, you can still have the same outcome using the Renderer2 library, however, it will be far more maintainable to have your already baked code in a component and repeat it as you need to. This way, you can achieve better outcomes and get more maintainable code. A common real-world examples of that would be adding elements on the checkout while you are already in the checkout page. In this case, you will need to create a checkout tile and add it to the container. Maybe another good example would be an error handler component that would display your success, error and warning messages. It could be not such a bad idea to handle it by a dynamic component that will delete all other components

The question is then, how do you achieve this, building dynamic components. The answer is:

  1. In your template, you have a container with a reference. This can be done with a #.
<div #container></div>

2. Reference the element using ViewChild in your .ts file

@ViewChild("container", { read: ViewContainerRef }) container;

3. Use code similar to the below to create the component

let factory: ComponentFactory<any> = this.resolver.resolveComponentFactory( DynamicComponent ); let componentRef: ComponentRef<any> = this.container.createComponent( factory ); componentRef.instance.dynamicMessage = "dynamic message";

4. One thing to take note of is that when you create a component, you will have to destroy it yourself, since Angular will not take care of this for you. Use the following code to do so:-

componentRef.destroy()

You can see a living example of dynamic components in action by visiting the following link: http://ow.ly/7yPU50C8oMH

I hope you found this blog useful. Can’t wait to meet you in another one!

The IT work culture

When we first join a job, we are concerned with one and one thing only: to deliver the optimal performance. I don’t think there is anything wrong with that, after all, this is what will keep us in the job and even though this is entirely accurate, it couldn’t be a worse plan. This plan overlooks the most important thing which is that us being technical doesn’t make us machines!

The thing that can make us super performance is establishing super good connections in the workplace. We can then have excellent performance and thrive. You should of course focus on performance but do realise that making too much stress over it doesn’t really help it. So, what is a better plan: Study the different personalities of people in the workplace. I will give you a few to know what to look for:-

The dream slave: I know the title is not very good, but it describes him very well. Yes, he like Martin Luther King has a dream. He wouldn’t settle until he sees it happen. For his dream, he is willing to do everything and anything and he prefers his dream over himself. He works for his dream essentially and he overlooks people and himself along the way and because he is not a realist, he is a visionary, more often than not his dreams are bumped hard against reality and he develops fears only to protect his dreams. He believes in the impossible and he seeks out to achieve it. He can be not super friendly and awkwardly dry, but please note that he is being as rough with himself as he is rough with you and he can’t help it. Don’t try to wake him up if you think that his dreams are not achievable because he wouldn’t take your word for it. He will only push further his way through and try to awe you by letting you see that his dreams were right. He has a very good heart, this is the only way he could tolerate the mistreatment and failures that come with his dreams. He is on a mission and he is a tool and so are you. Don’t take it personally, it is just who he is. He is usually interactive, fearful, worried and imaginative. Register him and try to deal with him in the best possible way and essentially make him like you and this can only happen when you know how to like him. There is no way around the human connection. Examples of dream slaves will be Apples’s Steve Jobs and Google’s Larry Page.

The nerdy cockroach: Oh, yeah! He is so nerdy. He is calm, nerdy, patient and a realist. He doesn’t care whether you see him or not, he is not very sociable. He just wants to survive and thrive and he is very pragmatic and intellectual. He uses his brain more than he uses his heart. He is ideas driven and not passion driven. In a stressful situation, he is the one who is least stressed and not related to the problem, calmly walking his way through the solution. Don’t disturb him with so many dreams, he is so practical for that. He is the one who will tell you: let us see what we can do about it and he would approach problems in the most practical way. He is not on a mission, he is very detached. And the more detached he becomes, the more practical and thoughtful he can become, and the more that he would be able to survive and survival comes as his first priority. People are usually angry at how calm he is and it will help to remember that this is who he is and he can’t really help it. He is naturally detached and anti-social, he doesn’t have to expend so much effort to get there and he doesn’t like the pressure of a dream. He is usually a book worm and he is not cool enough to hang around in a bar. And that is okay. Accept him for he he is and try to remember that he is fulfilling a different purpose than you and that is okay. An example of a nerdy cockroach would be Bill Gates.

The prestige seeker: yeah, this is who he is. He doesn’t want much of you, he just needs his respect. Always and always you must respect him even if you don’t love him, that is okay. But respect comes as his number one priority. He doesn’t like confrontations and he tries to avoid as many confrontations as he could manage and the moment that you force him into a confrontation, he is likely to feel incredibly bad about yourself as he strikes back. He would just leave you looking like an idiot. Yes, he would protect his dignity and prestige with all his might and this is his main driving force.

These are some of the personalities you might find in the workplace. Feel free to add to the list in the comments. But, do try to think about these things and try to find connection points rather than on just stressing about your performance. Other than that would be the upbringing of the bosses which will set the tone for the whole work culture. Did they come from humble beginnings, where their parents affluent. Obviously, all of this will come in one way or the other along your way and you should prepared for it. Do realise that there is nothing as a perfect upbringing although we all think that we have one and all upbringings have their advantages and disadvantages. For example, if the bosses come from humble beginnings, they would tend to make you scared all the time. You would think it is bad but you have got to realise that the best things that happened to them in their lives was when they were scared and this how they realised that fear was good. And try also to realise that their point of view is right. If you feel too secured, this is counter-productive. Try to accept it and try to love it.

The third connection that you need to establish is with the mission of the company: Do you think that their mission you are willing to defend or not. If not, just leave. After all, if you can’t voice it and you feel oppressed, you naturally will not be able to perform.

This is it for this blog, I hope to listen to your ideas in the comments.

React and Angular: the fight is not over

Is React more popular? Is Angular more popular? Short answer: React is more popular. Proof?

Google Trends. The question is: why is React more popular and Is it going to remain popular in the future?

I have more than 15 years of hand-on experience and I know one thing and one thing only: It is not enough to see current trends to be able to thrive in the market. It is equally important to be able to predict future trends because if you can’t do that, the trends are bound to change and everything can start falling on your head. So, let us begin our analysis of why is React more popular.

Quick and easy answer: performance and resistance.

It is not a secret that React outperforms Angular. Now, take React and put it on top Typescript and you will start facing some performance issues. Obviously, React you can start to add components incrementally and it offers you flexibility and speed of what you want to add and what you don’t want to add. Great, isn’t it? Well, is that it? Is this is why React dominating. No. Remember, Typescript which Angular is based on, is so heavily standardised and stylised and it makes front-end lose its fuzziness. Believe it or not, there is certain magic to this fuzziness that the front-enders tend to like. It seams so close to the art experience they have from UX designs to code. It is a part of their magic and a part of this unpredictability that make front-end more of an art than a science.

In the words of Brendan Eich, the inventor of Javascript:-

“If I had done classes in JavaScript back in May 1995, I would have been told that it was too much like Java or that JavaScript was competing with Java … I was under marketing orders to make it look like Java but not make it too big for its britches … [it] needed to be a silly little brother language.”

The above is a bug in Javascript that no one have had to the time to resolve. Indeed, the fuzziness of Javascript has been a part of the fuzzy culture that the front-enders identified with as a part of its magic and it gave them a lot of thrill when they were implementing the UX designs and it is one of the primary reasons why the back-enders didn’t dare step in their unfamiliar territories.

Now, think about the resistance that Typescript and Angular are facing and it is striving for standardisation. What in fact was thought of the right thing to do defied the front-enders pop culture.

Now, where is this leading us? Obviously, Angular has encouraged a lot of the back-enders to come into the front-end world which was a choice not cherished by the front-enders and this made them endorse more React. That in addition of the business having a little reason to stick to Angular given the performance difference. What is Typescript offering can be rivalled by tools like JSDocs which is less expensive in terms of performance. But, Angular did not die. Because standardisation will win. It always has done.

All, I am saying is: imagine that Google has managed to support Typescript in Google’s browser? I hope now you can see the impact. It is going to be huge. People, will no longer hold onto React, why should they? The business would have less choice to stick to React given that Google Chrome, the most popular web browser, supports Typescript.

Which programming language performs better: C or Java? The answer is C. Which programming language is more popular: C of Java? The answer is below:-

And the question is why? Short answer: Standardisation. Standardisation will always win. It always has. Using a number as a boolean and leading to unpredictable outcomes and can be cool and thrilling. But, at the end of the day we all know that a pointer is a pointer, boolean is a boolean and number is a number and we need more time to deliver business value over wasting our times solving interesting programmatic mind-turns.

I hope you find this article useful. I would love to hear your thoughts.

Front-End Tutorial 4 (Reference Tutorial) – Level 0

HTML Tags

Basic HTML

<!DOCTYPE> tag

Defines the document type

Example:-


<!DOCTYPE html>

<!DOCTYPE html> tag

  • This is a HTML5 document. HTML5 is the newest HTML version and it is the one we would be teaching in this course.

Example:-

<!DOCTYPE html>

<html> tag

  • The root of the html document.
  • All other html tags go into the <html> tag.

Example:-


<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document……
</body>

</html>

<head> tag

  • Carries information about the html document.
  • Can carry the title, scripts or links to styles.
  • Can be omitted in HTML 5.

Example:-


<head>
<title>Title of the document</title>
</head>

<title> tag

  • Defines a title tag to be used by:-
    • Search engines
    • Browser address bars
    • Added to the bookmarks

Example:-


<head>
<title>Title of the document</title>
</head>

<body> tag

  • Defines the document’s body. The whole of the html contents should lie in the body.

Example:-


<body>
The content of the document......
</body>

<h1> to <h6> tag

  • Defines the header tags helping search engines to come up with an HTML content structure.
  • Their appropriate use is essential for Google and other search engines to come up with a proper document outline.
  • We will definitely revisit them.

Example:-


<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

<p> tag

  • Defines a paragraph

Example:-


<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

<br> tag

  • Defines a line break.
  • Except in very special cases such as writing poems, the <br> tag should be avoided.

Example:-


To break lines<br>in a text,<br>use the br element.

<hr> tag

  • Defines a shift in subject in an HTML document.

Example:-


<h1>HTML</h1>
<p>HTML is a language for describing web pages.</p>

<hr>

<h1>CSS</h1>
<p>CSS defines how to display HTML elements.</p>

<!–…–> tag

  • This is a comment. Whatever goes as a text, doesn’t show on the screen, it only shows on the source of the page.
  • Do not put any sensitive information in HTML comments or hackers could see it and use it to steal your website. For example, don’t put Administrator’s password in HTML comments.

Example:-


<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Comments are not displayed in the browser -->

Formatting

<abbr> tag

  • The ‘a’ ‘b’ ‘b’ ‘r’ tag is used for abbreviations.

Example:-


<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

<address> tag

  • The address tag is used to display the contact information of the author of the article or the document.

Example:-


<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

<b>tag

  • Defines bold text
  • Try to avoid using this tag as it is always best to separate content from styling.

Example:-


<p>This is normal text - <b>and this is bold text</b>.</p>

<bdi> tag

  • Isolates the current text direction from the rest of the text.
  • Can be used to avoid browsers confusion in case of bi-directional text.

Example:-


<ul>
<li>User <bdi>hrefs</bdi>: 60 points</li>
<li>User <bdi>jdoe</bdi>: 80 points</li>
<li>User <bdi>إيان</bdi>: 90 points</li>
</ul>

<bdo> tag

  • Used to override the current text direction

Example:-


<bdo dir="rtl">This paragraph will go right-to-left.</bdo>

<blockquote> tag

  • Used to reference another source.

Example:-


<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote>

<cite> tag

  • Used to define the title of work, e.g. sculpture, painting, piece of writing, etc.

Example:-

<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

<code> tag

  • Defines computer code

Example:-

<code>A piece of computer code</code><br>

<del> tag

  • Used to mark a text that is no longer valid in a document and has been deleted.

Example:-

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

<dfn> tag

  • Defines the defining instance of a term

Example:-

<p><dfn>HTML</dfn> is the standard markup language for creating web pages.</p>

<em> tag

  • Defines an emphasised text

Example:-

<em>Emphasized text</em><br>

<i> tag

  • Used to signal a text in a different mood from the surrounding text.

Example:-

<p>He named his car <i>The lightning</i>, because it was very fast.</p>

<ins> tag

  • Defines a text newly updated or inserted on the website.

Example:-

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

 <kbd> tag

  • Defines a text formatted as a keyboard input.
  • Try to avoid using this tag as it is better to separate the content from the styling.

Example:-

<kbd>Keyboard input</kbd><br>

<mark> tag

  • Used to highlight a part of the text

Example:-

<p>Do not forget to buy <mark>milk</mark> today.</p>

<meter> tag

  • Used as a scalar measurement within a given range

Example:-


<meter value="2" min="0" max="10">2 out of 10</meter><br>
<meter value="0.6">60%</meter>

<pre> tag

  • Used to preserve line breaks and spaces in text.

Example:-


<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre>

<progress> tag

  • Used to display the progress of an ongoing task.

Example:-


<progress value="22" max="100">
</progress>

<q> tag

  • Defines a short quotation inserted between double curly braces “”.

Example:-


<p>WWF's goal is to:
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>

<rp> tag

  • Used to define what is to be displayed in browsers that do not support the Ruby annotations.
  • Ruby annotations are used to provide pronunciation or short annotations typically for East Asian languages.

Example:-


<ruby>
漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>

<rt> tag

  • Defines an optional annotation or explanation typically for Eastern Asian languages.

Example:-


<ruby>
漢 <rt> ㄏㄢˋ </rt>
</ruby>

<ruby> tag

  • Defines ruby annotations which provides extra explanations or pronunciations typically used in Japanese publications

Example:-


<ruby>
漢 <rt> ㄏㄢˋ </rt>
</ruby>

<s> tag

  • Used to represent a text that is no longer valid or has been replaced.
  • Difference between <s> tag and <del> tag is that <s> tag is used to indicate a text that is no longer valid and has been replaced by a newer text whereas a <del> tag represents a text that has been deleted from the document.

Example:-


<p><s>My car is blue.</s></p>

<samp> tag

  • Used to define a sample output of a computer program

Example:-


<samp>Sample output from a computer program</samp><br>

<small> tag

  • Defines small text and other side comments
  • Try to avoid using this tag as it is always best to separate content from style.

Example:-


<p><small>Copyright 1999-2050 by Refsnes Data.</small></p>

<strong> tag

  • Defines an important text

Example:-


<strong>Strong text</strong><br>

<sub> tag

  • Defines a subscripted text

Example:-


<p>This text contains <sub>subscript</sub> text.</p>

 <sup> tag

  • Defines a superscripted text

Example:-

<p>This text contains <sup>superscript</sup> text.</p>

<template> tag

  • Used to hold html content without displaying it.
  • JavaScript can be used to manipulate it later on to get it displayed.

Example:-


<template>
<h2>Flower</h2>
<img src="img_white_flower.jpg" width="214" height="204">
</template>

<time> tag

  • Defines a date/time object.
  • Useful for search engines and user agents to provide calendar reminders.

Example:-

<p>We open at <time>10:00</time> every morning.</p>

<p>I have a date on <time datetime=”2008-02-14 20:00″>Valentines day</time>.</p>

<u> tag

  • Represents text that is stylistically different such as misspelled words.
  • Should not be used if another tag is more appropriate to be used.
  • Should not be used is is going to get confused with hyperlink.

Example:-


<p>This is a <u>parragraph</u>.</p>

<var> tag

  • Used to display a variable in a mathematical formula or a computer program.

Example:-


<var>Variable</var>

<wbr> tag

  • Defines a work-break opportunity for browsers.
  • Used when you are afraid for the browser to break the word in the wrong place.

Example:-


<p>
To learn AJAX, you must be familiar with the XML<wbr>Http<wbr>Request Object.
</p>

Forms and Input

<form> tag

  • Defines a form in an HTML document.
  • Can contain buttons, input fields, submit buttons, option selection, field sets and other form elements.

Example:-


<form action="/action_page.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form>

<input> tag

  • Defines a point of user-interaction in an html document.
  • Typically used inside a form

Example:-


<form action="/action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form

<textarea> tag

  • Defines a multiline input control.

Example:-


<textarea rows="4" cols="50">
At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.
</textarea>

<button> tag

  • Defines a clickable button.

Example:-


<button type="button">Click Me!</button>

<select> tag

  • Used to give the user a set of options to choose from.
  • The difference between a select tag and input with a datalist tag is that a select tag forces the user to pick one of the options where as an input with a datalist tag gives the user a choice whether he wants to choose one of the options or enter his own choices.

Example:-


<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>

<datalist> tag

  • Defines a list of pre-defined options for the input control

Example:-


<input list="browsers">

<datalist id=”browsers”>
<option value=”Internet Explorer”>
<option value=”Firefox”>
<option value=”Chrome”>
<option value=”Opera”>
<option value=”Safari”>
</datalist>

<label> tag

  • Defines a label for an input element

Example:-


<form action="/action_page.php">
<label for="male">Male</label>
<input type="radio" name="gender" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="female"><br>
<label for="other">Other</label>
<input type="radio" name="gender" id="other" value="other"><br><br>
<input type="submit" value="Submit">
</form>

<option> tag

  • Defines an option in a combo selection box.

Example:-


<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

<optgroup> tag

  • Used to group of set of options in a selection box together.

Example:-


<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>

<fieldset> tag

  • Defines a group of related items in a form surrounded by bordered box.

Example:-


<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
</form>

<legend> tag

  • Defines a caption for a set of fields in a form.

Example:-


<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text" size="30"><br>
Email: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
</form>

<output> tag

  • Defines the result of calculation

Example:-


<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>

Frames

<iframe> tag

  • Used to include a part of the website referencing a different URL and display it inline with the rest of the document.

Example:-


<iframe src="https://www.w3schools.com"></iframe>

Images

<img> tag

  • Used to display an image on the website.

Example:-


<img src="smiley.gif" alt="Smiley face" height="42" width="42">

<map> tag

  • Defines the image into a set of clickable areas.

Example:-

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name=”planetmap”>
<area shape=”rect” coords=”0,0,82,126″ href=”sun.htm” alt=”Sun”>
<area shape=”circle” coords=”90,58,3″ href=”mercur.htm” alt=”Mercury”>
<area shape=”circle” coords=”124,58,8″ href=”venus.htm” alt=”Venus”>
</map>

<area> tag

  • The area tag defines a clickable part in an image map.

Untitled

Example:-


<img src="planets.gif" width="145" height="126" alt="Planets"
usemap="#planetmap">

<map name=”planetmap”>
<area shape=”rect” coords=”0,0,82,126″ href=”sun.htm” alt=”Sun”>
<area shape=”circle” coords=”90,58,3″ href=”mercur.htm” alt=”Mercury”>
<area shape=”circle” coords=”124,58,8″ href=”venus.htm” alt=”Venus”>
</map>

<canvas> tag

  • Used to draw graphics on the fly via scripting, usually Javascript.

Example:-


<canvas id="myCanvas"></canvas>

<script>
var canvas = document.getElementById(“myCanvas”);
var ctx = canvas.getContext(“2d”);
ctx.fillStyle = “#FF0000”;
ctx.fillRect(0, 0, 80, 80);
</script>

<figcaption> tag

  • Defines the caption of a photo in a <figure> tag.

Example:-


<figure>
<img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>

<figure> tag

  • Defines illustrations or diagrams in a document.

Example:-


<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
</figure>

<picture> tag

  • Defines an image container for images and displaying any of them based on a selection criteria.
  • Used to build responsive images. Responsive images are images that are displayed equally well on a desktop computer and a mobile device.

Example:-


<picture>
<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width: 465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

<svg> tag

  • Defines SVG graphics.
  • Examples:-
    •  Define line
    • Define circle
    • Fill color

Example:-


<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

Audio / Video

<audio> tag

  • The audio tag defines sound content on the site.

Untitled

Example:-


<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

<source> tag

  • Used inside a picture, video or audio tag
  • To be displayed if matched by media query, media support or codec support

Example:-


<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

<track> tag

  • Defines text subtitle tracks for video and audio.

Example:-


<video width="320" height="240" controls>
<source src="forrest_gump.mp4" type="video/mp4">
<source src="forrest_gump.ogg" type="video/ogg">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
<track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video>

 <video> tag

  • Defines a video, movie clip or an other video stream.

Example:-


<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

Links

<a>tag

  • Anchor tag defines a hyperlink. Link to another website or an internal link to the current website.

Example:-


<a href="https://www.w3schools.com">Visit W3Schools.com!</a>

<link> tag

  • Used to link style sheets to html documents.

Example:-


<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>

<nav> tag

  • Contains Navigation links

Example:-


<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

Lists

<ul> tag

  • Defines an unordered list.

Example:-


<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

<ol> tag

  • Defines an ordered list

Example:-


<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

<ol start=”50″>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

<li> tag

  • Defines a list item

Example:-


<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

<dl> tag

  • Description list contains a list of terms and definitions for these terms.

Example:-


<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

<dt> tag

  • It defines a term in a description list

Example:-


<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

<dd> tag

  • Defines the definition of a term in a definition list.

Example:-


<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

Tables

<table> tag

  • Defines a table
  • Not recommended to use it except for emails.

Example:-


<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>

<caption> tag

  • Defines a table caption

Example:-


<table>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>

<th> tag

  • Defines a header cell in a table.

Example:-


<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>

<tr> tag

  • Defines a row in an HTML table

Example:-


<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>

<td> tag

  • Defines a table’s cell.

Example:-


<table>
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>

<thead> tag

  • Groups the header cells in a table.

Example:-


<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>

<tbody> tag

  • Defines a table’s body

Example:-


<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>

<tfoot> tag

  • Defines the footer content of a table.

Example:-


<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>

<col> tag

  • Useful for applying styles for entire table columns.

Example:-


<table>
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>

<colgroup> tag

  • Container for one or more columns for formatting of tables.

Example:-


<table>
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>

Styles and Semantics

<style> tag

  • Used to provide styling information in HTML documents

Example:-


<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>

<h1>A heading</h1>
<p>A paragraph.</p>

</body>
</html>

<div> tag

  • A commonly used generic container for other HTML tags.

Example:-


<div style="background-color:lightblue">
<h3>This is a heading</h3>
<p>This is a paragraph.</p>
</div>

<span> tag

  • Displays a generic inline container
  • Can be used for styling or JavaScript manipulation

Example:-


<p>My mother has <span style="color:blue">blue</span> eyes.</p>

<header> tag

  • Defines the head of a section in the document.
  • Not to be confused with the head tag as the head tag contents are not displayed by browsers.
  • Can contain <h1> to <h6> tags or navigation links.

Example:-


<article>
<header>
<h1>Most important heading here</h1>
<h3>Less important heading here</h3>
<p>Some additional information here</p>
</header>
<p>Lorem Ipsum dolor set amet....</p>
</article>

<footer> tag

  • Defines the footer of a section in a document.
  • It could contain address information, copy right, etc.

Example:-


<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a href="mailto:someone@example.com">
someone@example.com</a>.</p>
</footer>

<main> tag

  • Defines the main content of an HTML document.

Example:-

<main>
<h1>Web Browsers</h1>
<p>Google Chrome, Firefox, and Internet Explorer are the most used browsers today.</p>

<article>
<h1>Google Chrome</h1>
<p>Google Chrome is a free, open-source web browser developed by Google,
released in 2008.</p>
</article>

<article>
<h1>Internet Explorer</h1>
<p>Internet Explorer is a free web browser from Microsoft, released in 1995.</p>
</article>

<article>
<h1>Mozilla Firefox</h1>
<p>Firefox is a free, open-source web browser from Mozilla, released in 2004.</p>
</article>
</main>

<section> tag

  • Defines a section in the document

Example:-


<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>

<article> tag

  • The article tag defines an independent self-content, distributable on its own. Examples: news, events, comments.

Example:-


<article>
<h1>Google Chrome</h1>
<p>Google Chrome is a free, open-source web browser developed by Google, released in 2008.</p>
</article>

<aside> tag

  • The aside tag defines side notes on the surrounding contents.

Example:-


<p>My family and I visited The Epcot center this summer.</p>

<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

<details> tag

  • Defines a collapsible section in a document that is hidden by default.

Example:-


<details>
<summary>Copyright 1999-2018.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>

<dialog> tag

  • Defines a dialog box on the screen.

Example:-


<table>
<tr>
<th>January <dialog open>This is an open dialog window</dialog></th>
<th>February</th>
<th>March</th>
</tr>
<tr>
<td>31</td>
<td>28</td>
<td>31</td>
</tr>
</table>

<summary> tag

  • Defines a collapsible text in a details tag.

Example:-


<details>
<summary>Copyright 1999-2014.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>

<data> tag

  • Gives a machine-intelligible version for a human-readable data.

Example:-


<ul>
<li><data value="21053">Cherry Tomato</data></li>
<li><data value="21054">Beef Tomato</data></li>
<li><data value="21055">Snack Tomato</data></li>
</ul>

Meta Info

<head> tag

  • Carries information about the html document.
  • Can carry the title, scripts or links to styles.
  • Can be omitted in HTML 5.

Example:-


<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document……
</body>

</html>

<meta> tag

  • Defines meta information about a document to be parsed by machines.

Example:-


<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<base> tag

  • Defines the base url for all relative urls on the source of the page.

Example:-


<head>
<base href="https://www.w3schools.com/images/" target="_blank">
</head>

<body>
<img src=”stickman.gif” width=”24″ height=”39″ alt=”Stickman”>
<a href=”https://www.w3schools.com”>W3Schools</a>
</body>

Programming

<script> tag

  • Used to define scripting elements using JavaScript.
  • JavaScript is a client-side code used for such things as manipulating HTML elements and form validations.
  • Script can be either be to an internal or external file.

Example:-


<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

<noscript> tag

  • Gets displayed to users with no support for JavaScript or who disabled JavaScript in their browsers.

Example:-


<script>
document.write("Hello World!")
</script>
<noscript>Your browser does not support JavaScript!</noscript>

<embed> tag

  • Used as a container for non-html components.

Example:-


<embed src="helloworld.swf">

<object> tag

  • Defines an embedded object

Example:-


<object width="400" height="400" data="helloworld.swf"></object>

<param> tag

  • Defines parameter of an object

Example:-


<object data="horse.wav">
<param name="autoplay" value="true">
</object>

References

https://www.w3schools.com/

https://developer.mozilla.org/

https://stackoverflow.com/

Front-End Tutorial 3 – Level 0

 This tutorial is going to be the first one in developing the BoxiBall game described in details in the previous tutorial. If you are a total beginner in front-end programming, this tutorial has two pre-requisite tutorials necessary for you to watch. Please, search for them on our Facebook page, Google Plus page, LinkedIn page, my own personal page or YouTube Channel. You would be able to find links to all of these here.

 1) Type in the following in a blank text document using your favourite text editor:-

 <!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

2) Save the file as BoxyBall.html. Open it using Google Chrome’s latest version.

3) Change the title to: Ball Game.

4) Save the file, refresh the browser and note the effect.

5) Change the body’s content to:

<div>

<div></div>

</div>

6) Save the file.

For more information for the html tags, watch next tutorial which comes as an optional tutorial although it is highly recommended.