1. Editing Html5 Document
One can use any text code editor to create a html5 document. If you need syntax highlighting, you can download and install the Visual Studio Code and then install the plug-in shown below:
After installing the plug-in, create a file called: 001_MyFirst.html. In the below screen, we create a file in a folder called html and then we open that folder in the visual studio code. After this, you can type the code as shown below (Or Copy-Paste it from the reference section).
In the left side toolbar of the Visual Studio Code, you can click the button marked in red, which will open the UI as shown below. Click on the Run and Debug button, and pick a favorite browser to run the file. Now, you can see the output in the browser.
Note: You can also use a simple notepad.exe to create the content and save it in a folder. Then double click the file to open it in the default browser.
2. About the Example
The example is below:
Above picture showed the example we are going to create in this example. Here, we will create a document with the title First Html-5 Content. The browser displays page heading followed by a simple paragraph which contains two sentences.
3. Exploring the HTML5 Document First Example
The code is below:
In the above code, very first tag <!DOCTYPE> denotes the document type is Html. HTML – stands for Hyper Text Markup Language which is a universal standard document type which can travel through the internet. The <Html> tag specifies the beginning of the document and </Html> tells where the document ends. <Head> tag specifies header information for the document. In this example, we specified only the <Title> which is used to provide name for the web document. This will appear in the browser window’s title bar. The header can involve many other information which we will see in some other examples.
The browser will render the content of the html document enclosed in the <body> section. In our example, we used two tags in the html body. They are:
- <H1> Tag
- <P> Tag
The <H1> is the header tag level 1. These tags vary from <H1> through <H6>. H1 appears in big font size, and it will reduce in size when the text is marked with <H2> and further reduced with <h3> and so on. While header tags are used to form the document heading and sub-heading, <p> tag is used to form the paragraphs. In our example, we have two sentences placed within the <p> tag to form the paragraph.
4. Code Reference – First Html5 Document
4.1 001_MyFirst.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>First Html-5 Content</title> </head> <body> <h1>Sample Page with Header</h1> <p> This is a sample first paragraph. This is second sentence in the paragraph. </p> </body> </html> |
Categories: HTML5
Do you like this Example? Please comment about it for others!!
This site uses Akismet to reduce spam. Learn how your comment data is processed.