Complete HTML coding for kids chapter 2 HTML FORMS In Html form Tag is used to create or design a simple form under body element. It has a certain facility to put data with an interactive layout. It has buttons and several fields which has fields such as input text Read more…
All HTML documents are divided into two main parts: the head and the body. When you begin any new page, it must have a declaration: <!DOCTYPE html>. It’s telling or declaring to the browser that the following file is an HTML file. To build any webpage you will need four primary tags: <html>, <head>, <title> and <body>. These are all container tags and must appear as pairs with a beginning and an ending
. 
Every HTML document begins and ends with the <html> tag. This tells the browser that the following document is an html file. Remember, tags tell the browsers how to display information. The <html> tag represents the root of an HTML document. The <html> tag is the container for all other HTML elements (except for the <! DOCTYPE> tag). Note: You should always include the lang attribute inside the <html> tag, to declare the language of the Web page.
The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag. HTML metadata is data about the HTML document. Metadata is not displayed. Metadata typically define the document title, character set, styles, scripts, and other meta information. The <head> tag contains the title of the document along with general information about the file, like the author, copyright, keywords and/or a description of what appears on the page.
Appears within the <head> tags and gives the title of the page. Try to make your titles descriptive, but not more than 20 words in length. The title appears at the very top of the browser page on the title tab. Defines the document’s title that is shown in a browser’s title bar or a page’s tab. It only contains text; tags within the element are ignored. … Text that is not inter-element whitespace
The main content of your page is placed within the body tags: your text, images, links, tables and so on.The <body> tag defines the document’s body. The <body> element contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc. 
Part of the web page structure is called nesting. Notice above how the tag <title> is nested inside the <head> tag, while <head> and <body> are nested inside <html>.
Now open the file it will show on the page in the web browser.
Every time you want to begin a new paragraph, you use the paragraph tag. This is a container one, so you have to remember to have a beginning and an ending. Do you remember what an ending tag looks like? Here’s the tag with an opening and a closing:
<p>…</p>
To add a single line of space, you use the break tag:
<br>
This is an empty tag and stands alone. You can use the <br> tag to insert one or more blank lines.
To create a horizontal line on your page you use the empty tag:
<hr>
One way to create bold copy in HTML is by using the headline tag. There are six levels of headlines, ranging from <h1>…</h1> to <h6>…</h6>. Here is an example of the code for all the headline sizes:
Step 1
Load your text editor and enter the following.
<!DOCTYPE html>
<html>
<head>
<title>Coding</title>
</head>
<body>
<h1>coding for kids</h1>
<hr>
<p>Programming and coding skills have a
massive demand</p>
<h2> HTML programming </h2>
<p> programming language you should learn HTML. </p>
</body>
</html>
now save the file with .html extension
see the result in web browser
Element |
Meaning |
Purpose |
|
<b> |
Bold |
Highlight important information |
|
<i> |
Italic |
To denote text |
|
<strong> |
Strong |
Similarly to bold, to highlight key text |
|
<em> |
Emphasised Text |
Usually used as image captions
|
|
<mark> |
Marked Text |
Highlight the background of the text |
|
<small> |
Small Text |
To shrink the text |
|
<strike> |
Striked Out Text |
To place a horizontal line across the text |
|
<sup> |
Superscript Text |
Another typographical presentation style |
|
<u> |
Underlined Text |
Used for links or text highlights |
|
<sub> |
Subscript Tex |
Typographical stylistic choice |
|
<ins> |
Inserted Text |
Displayed with an underline to show an inserted text |
t
Lists come in a variety of forms with most either numbered or bulleted. The numbered lists are called ordered lists and the bulleted lists are unordered lists.
Lists are nested. There is a tag that identifies the type of list, like numbered or bulleted. Then within that tag there is another tag that itemizes the list. Maybe some definitions would help.
<ol>…</ol>
The ordered list is a container tag and is used for numbered lists.
<ul>…</ul>
The unordered list is a container tag and is used for bulleted lists.
<li>…</li>
The listed item tag is a container tag and is nested within the ordered or unordered tags.
Example of bulleted list
<!DOCTYPE html>
<html>
<head>
<title>coding is fun</title>
</head>
<body>
<h1>why kids learn coding </h1>
<Hr>
<p> </p>
<p>Coding is new fuel in economy</p>
<ul>
<li>Communicate effectively with technical teammates. …
</li>
<li>Change careers altogether. …</li>
<li>
Get started with startups. …/li>
<li>You’ll improve your logical thinking</li></ul>
<p>hey everyone .</p>
</body>
</html>
save it with .html extension
see the result in web browser
EXAMPLE OF ORDERED LIST
HTML coding for kids chapter 1 basic concept What is HTML? HTML stands for Hypertext Markup Language. Developed by scientist Tim Berners-Lee in 1990, HTML is the “hidden” code that helps us communicate with others on the World Wide Web (WWW). The <!DOCTYPE html>declaration defines that this document is an HTML5 Read more…