Who can learn from This DTB tutorial ?
Anyone who want to understand the HTML in enough detail along with its simple overview, and practical examples. This DTB tutorial will give you enough materials with small project to live projects ( T&C applied for live a projects ) to start with HTML from where you can start making project.
Any previous knowledge required for this DTB tutorial for HTML ?
- Experience with any text editor like notepad, edit plus ,notepad++ etc.
- if you know How to create directories or files on your computer.
- How to navigate through different directories.
- How to write text in a file and save them on a computer.
- Understanding about images in different formats like JPEG, PNG or other formats.
Now I think we should start coding . Now we will learn how to write more than Hello world in html .
Basic HTML Document Example
In its Html form, here is an example of an HTML document −
<!DOCTYPE html> <html> <head> <title>This is title offered by DigiTechBits </title> </head> <body> <h1>This is a heading</h1> <p> Write your Document content here.....</p> </body> </html>
Past this code in any text editor like notepad or brackets or any other , Now Save this code as any name with .html extension ( Like : Digitechbits.html ) , Now open the file then you will see the result .
What NEXT ?
Now change the Text inside h1 tag which is ” This is heading” . Write any other text of your choice . Like ” <h1> Welcome to home page </h1> . Now save the file . And refresh your browser page , You will get a different text in heading . This tag is Heading tag .
Now you can practice with more tags like h1 , h2 , h3 , h4 , h5 , h6 …
<!DOCTYPE html> <html> <head> <title>Heading Example</title> </head> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> </body> </html>
And see the difference .
As we know HTML is a markup language and makes use of various tags to format the content. All the tags are enclosed within angle braces like <Tag Name> .Some few tags have not There Corresponding closing tags , but most of the tags have their corresponding closing tags. For example, <html> has its closing tag </html> and <body> tag has its closing tag </body> tag etc.
About HTML Document Structure
A Regular HTML document will have the following structure −
<html> <head> Document header related tags </head> <body> Document body related tags </body> </html>
The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of text should go in between an opening <p> and a closing </p> tag Here is the example as shown below −
<!DOCTYPE html> <html> <head> <title>Digitechbits Paragraph Example</title> </head> <body> <p>Here is a first paragraph of text.</p> <p>Here is a second paragraph of text.</p> <p>Here is a third paragraph of text.</p> </body> </html>
How to use Line Break Tag
Whenever you use the <br /> element, anything following it starts from the next line. This is something like a enter space between two lines . You can use the tag anywhere .
<!DOCTYPE html> <html> <head> <title>Digitechbits Line Break Example</title> </head> <body> <p>Hello<br /> You need to submit your project today.<br /> Thanks<br /> DigiTechBits</p> </body> </html>