HTML Coding for Kids and Teens: Learn HTML in 10 Minutes
What is HTML?
HTML is short for hypertext markup language and it is the programming language commonly used to render web pages. The web browser understands and interprets the HTML program and displays the output onto the screen.
Getting started with HTML
HTML code can be created and edited in a variety of ways. The following are some of the popular ways to write and edit HTML code to develop web pages.
1. Text Editor: HTML code runs inside a browser and therefore does not need any compiler and the programs can be written in a plain text editor. The code can then be open in the browser to view the output.
2. IDE (Integrated development environment): However, it is a cumbersome process to write HTML code in a plain text editor. Software programs referred to as integrated development environments (IDEs) offer a convenient way to write HTML code. IDEs have several features like color coding, intellisense and starter templates that make coding a seamless experience. (Learn more about IDEs in our blog post on Integrated Development Environments.)
Parts of a web page: HTML, CSS & JavaScript
A web page refers to a page in a website and is displayed within a browser. Let’s take a look at the 3 main parts of every web page.
1. HTML. The first and most important part of a web page is the HTML code behind the web page. The HTML code can be thought of as the document that contains the contents of the entire web page written in HTML syntax. The browser has the ability to read the HTML code and render the expected output onto the web page.
HTML code is made up of several tags and each tag is used to display a specific kind of information. For example, the <h> tags are used to display headings. If the browser encounters a <h> tag, it will know to display the information contained within the tags as a heading.
2. CSS CSS refers to cascading style sheets and as the name implies, it is used to style HTML pages. What does it mean to style a HTML page? Very simply put, styling refers to setting visual attributes, like font size, color, weight etc., of elements like <h> tags.
The font type, font size and weight of all text elements like the <h>, <p>, <span> can be set using CSS. These styles can also be set directly in the respective HTML elements, so why are we using CSS?
CSS Classes CSS classes can be created to hold common styles that can be applied to multiple elements. For example, if you want to style <h2> in a certain way throughout a website, you can either specify the styles in each of the <h2> tags, or, you can create a CSS class for the h2 tag, specify all the styles and use this class in all your css tags. If you are setting 5 different styles for <h2>, you do not have to do it over and over again, you can simply set the attributes once in the CSS class and use this class in all the <h2> tags.
A CSS class is defined with a dot followed by a class name.
Let’s use this class in the HTML code:
3. JavaScript JavaScript is lightweight code that is used to make web pages dynamic. Web pages that are static are simply used to display the same content. Dynamic pages on the other hand interact with the user, get some input from the user and display dynamic content that will change based on the user input.
JavaScript code is typically used to make a web page dynamic. The code can be embedded within the <script></script> tags in an HTML program.
In summary, the HTML holds the actual content of the web page, the CSS document contains classes that hold the styling of all the HTML elements and the JavaScript files contain the code used for making the webpage dynamic and respond to user input.
A deeper look at HTML
Let us take a look at how to create an HTML program and learn about some of the most commonly used tags in HTML.
1. The HTML Document. An HTML program is referred to as an HTML document and is simply a text file with a .html extension. The HTML document has a pre-defined structure and has to be enclosed between the <html> and </html> tags.
The first step to creating an HTML program is to use a software IDE and create an HTML file. It is quite cumbersome to create an HTML program from scratch and the IDEs solve the problem by creating a pre-made HTML template as seen above.
2. Tags in HTML. Tags are the basic building blocks of HTML. HTML has a set of pre-defined tags and the browser uses the tags to decide what to do with the information enclosed within a tag. For example, whenever the browser encounters an image tag, it knows that it has to display an image and that the image details are enclosed with the tag.
Tip: Every tag needs a beginning <> as well as an ending </> tag. The ending tag signals to the browser that the information has ended.
3. Head. The <head> </head> tag is used to include setup information, the title to be displayed on the browser and also information about any CSS and JavaScript files that are used by the webpage.
The <script></script> tag is used to include any JavaScript files and the <link></link> tag is used to link to any CSS files. Both of these tags need to be within the <head></head> tags as shown in the image above.
Tip: The IDE generates a template file that has the script and link tags, you can fill out the details within the tags to include and link your JavaScript and CSS files.
4. Body. The <body></body> tag encloses all the information that is displayed on the webpage. The bulk of your HTML code will be written within these tags.
5. Headings. HTML has 6 heading tags that can be used for different headings and subheadings in a web page. The heading tags are <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.
6. Paragraphs. The paragraph <p></p> tags are used to display paragraphs or text on web pages. Everything that is present within these tags will be rendered on to the browser. Whitespaces and line breaks will be ignored by the browser.
7. Links. A hyperlink, commonly referred to as a link is used to link one web page to another. The <a> tag is used to enclose hyperlinks in HTML.
The hyperlink tag can be used to link to pages in the same website or to pages in a different website.
Tip: Some websites have restrictions around linking to their pages, so it may not be possible to link to pages that have restrictions.
8. Images. The <img> tag is used to display images. Attributes such as the image source file, height, width etc. can be specified within the image tag.
Kodeclik is an online coding academy for kids and teens to learn real world programming. Kids are introduced to coding in a fun and exciting way and are challeged to higher levels with engaging, high quality content.