Complete HTML coding for kids chapter 

HTML coding for kids

Complete HTML coding for kids chapter 

LETSCODE

HTML structure.

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

. HTML for kids

<html>…</html>

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.

<head>…</head> CODING KIDS

<head>…</head>

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.

<title>…</title> CODING HTML KIDS

<title>…</title>

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

<body>…</body> CODING KIDS

<body>…</body>

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. Problem solving in hindi

Nesting

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>.

NESTING

 

Create your first page on Notepad

  • Step 1 Open your Text Editor
  • To find PC Notepad go to: Start All Programs Accessories Notepad To find MAC TextEditor it go to: Start up MAC
  • Go Applications Click on Texted it <!DOCTYPE html> <html> <head> hello this is my webpage <title> this my first page</title> </head> <body>
  • This part of the webpage shows words charts videos and image. </body> </html>
  •  Save the file with page.html extension.  

html text editor

Now open the file it will show on the page in the web browser.

html page in web Brower

 

Basic Text Formatting

Paragraphs and Breaks <p>…</p>


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.

Horizontal Rule


To create a horizontal line on your page you use the empty tag:

<hr>


Headline tag


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

coding ion html

BASIC TEXT FORMATTING

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                                             

 

Making a list

 

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.

listing in HTML coding for kids

<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

Type the following program in notepad editor

<!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>

coding for kids html notepad

save it with .html extension

see the result in web browser

listing in HTML coding for kids 

EXAMPLE OF ORDERED LIST

(more…)