View HTML Page Source:
To prove that the websites are designed with HTML language, lets view the page source of an example page by following the below steps:
2. Right Click on the Basic Web Page and select 'View Page Source' option as shown below:
3. Ensure that Page Source of the selected Page is displayed in HTML as shown below:
4. Hence it is proved that the Web Pages are designed using HTML Language.
Understanding HTML
HTML TAGS and HTML ELEMENTS:
In order to understand the HTML Language, first you have to understand the following:
- HTML TAGS
- HTML ELEMENTS
Example:
<h1> Contents </h1>
- <h1> is the start tag
- Conents is the HTML Element
- </h1> is the end tag or closing tag
<h1> Contents </h1> is used to create 'Contents' heading in the Web Page.
So we write HTML statements like <h1> Contents </h1> using HTML Start Tag, HTML Element and End Tag.
Using Tryit Editor to Learn HTML:
2. Ensure that TryIt Editor Page is displayed with some existing code as shown below:
3. Remove the existing code and click on 'Submit Code' button on the page as shown below:
4. Ensure that the Results page is now displayed blank after clicking 'Submit Code' button in the previous step as shown below:
5. First write down <html> and </html> tags into the 'Source Code' Text Area field of 'TryIt Editor' as shown below:
6. Now click on 'Submit Code' button and ensure that nothing got displayed in the Results page as shown below:
7. The Result is still displayed blank, as <html> </html> tags are used to define the structure of the page (i.e. they define the complete page including head and body of the page) instead of displayed something as result.
8. Now lets write down <body> </body> tags inside the already written <html> and </html> tags as shown below, click on 'Submit Code' button and ensure that still nothing is displayed under the 'Result' area as shown below:
8. The Result is still displayed blank, as <body> </body> tags are used to define the body of page. i.e. Any html code written between these body tags will be displayed inside the body of the page.
So going forward if we want to write any HTML Tags we have to first create <html>, <body>, </body> and </html> tags which define the structure of the page.
Heading Tags:
Lets display different sizes of headings using the Following HTML statements:
<h1> Heading One </h1>
<h2> Heading Two </h2>
<h3> Heading Three </h3>
<h4> Heading Four </h4>
<h5> Heading Five </h5>
<h6> Heading Six </h6>
2. Ensure that TryIt Editor Page is displayed with some existing code as shown below:
3. Remove the existing code and click on 'Submit Code' button on the page as shown below:
4. Ensure that the Results page is now displayed blank after clicking 'Submit Code' button in the previous step as shown below:
5. Write down <html> and <body> tags as shown below:
6. Now write down the HTML tags which are used to display different sizes of headings inside the <body> and </body> as shown below:
7. Click on 'Submit Code' button and observe that different sizes of headings are displayed in the 'Result' Area as shown below:
This is how the HTML Code is written to design the web pages.
But the web pages may require different kinds of UI elements other than Headings like Page Text, Bold Text, Underline Text, Italic Text, Underlines, Rulers, List Items, Buttons, Drop downs, Text Boxes and many more. In order to get those items into the result we've to learn or know the specific HTML Tags to get the required elements.
HTML ATTRIBUTES:
In order to change the properties of the HTML elements we've to use HTML Attributes inside the HTML Tags.
1. In our previous example we've observed that the Page Body is displayed in white by default as shown below:
2. Now lets change the background color of the page body from white to yellow by writing the bgcolor='yellow' attribute into the <body> tag of the HTML code as shown below:
3. Click on 'Submit Code' button and observe that the page body got changed to yellow color as shown below:
This is how we use HTML Tags, HTML Elements and HTML ATTRIBUTES for designing the web pages.
If you want to excel in HTML Coding you can start learning it from the HTML Tutorial provided at http://w3schools.com/html/default.asp.
The upcoming posts can only be understood if you have basic HTML knowledge.
Please comment below to feedback or ask questions.
Introduction to XPath will be explained in the next post.
Introduction to XPath will be explained in the next post.
