Kids Coding: Basic HTML | Setting up an HTML Document

Learn CodingAssalamu’alaikum,

Previously my son learned coding via code.org but he got stuck on stage three because it was a bit complicated. And then I decided to teach him about basic HTML instead.

HTML is the standard markup language used to create web pages. You can also learn basic html from http://www.w3schools.com/html/DEFAULT.asp or you can practice straightaway via www.jsbin.com. So far he has learnt how to create an html document, make a paragraph (text), modify the paragraph using different type of tags. Ok lets start coding.

1. Setting up an html document.
Computer reads a line code just like some one reads a book. You read a book line by line. So does a computer. In order to set up an html document you need to type in coding as below:

<!DOCTYPE html>
<html>
<body>

</body>
</html>

html 1
If you notice the coding above, you can see two similar codes ie. <html></html>. The reason is that in coding it has a starting point and an ending point. Just like a full stop, a coma, a punctuation etc in a sentence.

2. Inserting a paragraph
As I explained before, you need to understand that in html you need to have a starting point and an ending point. To insert a paragraph (some text) between html body, we need to start of a command using a <p> tag, this <p> tag is going to be a paragraph text and don’t forget we need to close the text using a </p> tag.

<!DOCTYPE html>
<html>
<body>

<p>This is Rahmah. Learning HTML is fun.</p>

</body>
</html>html aYou can modify the paragraph above using different type of tags. Please see pictures below for details.html bNote: Use the <br> tag if you want a line break (a new line) without starting a new paragraph. The <br> element is an empty HTML element. It has no end tag.html cNotes: <b> for bold, <u> for underline and <i> for italic. Don’t forget to add the end tags.

Jazaakumullah khairan.

Wassalamu’alaikum.

RI sign

2 thoughts on “Kids Coding: Basic HTML | Setting up an HTML Document

Leave a Reply to Rahmah Muslim Homeschool Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.