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
.
<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>
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>
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>
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.
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>.
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.Ā Ā
Now open the file it will show on the page in the web browser.
Ā
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
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
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
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>
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…