Building web pages using html programming


Share

Article background

In this article you will learn building web pages using html tags, attributes, tables, images, lists, links, forms.



Course eligibility

Learn to develop embedded systems, interfacing electronic peripherals through real time projects and get required practical skills for software jobs



Course eligibility

Learn to develop embedded systems, interfacing electronic peripherals through real time projects and get required practical skills for software jobs



Course eligibility

Learn to develop embedded systems, interfacing electronic peripherals through real time projects and get required practical skills for software jobs

Article Contents


Structure of an html web page

The basic structure of an html page is as shown below.

The basic structure of an html web page

<html> 
  <head> 
  </head>
  <body>
  </body>
</html>

Let's discuss the various components of HTML web page

HTML tags are keywords that helps web browser to distinguish between an HTML content and a simple content. HTML tags contain three main parts: opening tag<>, content and closing tag. But some HTML tags are unclosed tags.

The opening html tag indicates that anything between it and a closing /html tag is HTML code.

The header related tags e.g. title, description, ccs links etc are included between head and /head tags.

The text that will be visible from the HTML document is between body and /body tags

The links to the javascript files are also included between body and /body tags

Anything written between h1 and /h1 tags are a main heading.

Anything written between p and /p tags are a paragraph of text.

HTML Hello World program

Open Notepad. Write the following into it and save it as hello.html and set the encoding to UTF-8. Right click on the hello.html file and open it using any browser. You should see HTML Hello World! displayed on your browser. You should observe that the title appears on the top of the browser.

The html Hello World program source code

<html> 
  <head>
    <title>Writing HTML Hello World</title> 
  </head>
  <body>
    <h1> HTML Hello World! </h1>
    <p>Some Html code </p>
  </body>
</html>

Basic html tags

Basic html tags

Tag Functionality Example
h1,...,h6 header tags h1 to h6

Header

p Paragraphs text

Header

span No line change after span Header Tag
div divide between contents on the webpage
content
a hyperlink used to link from one page to another. Mbed Technologies
center Move content to center
Content
br Line break
Content
hr a horizontal line
pre Preserve source code formatting
printf("Hello World\n");

Forms

A HTML form on a web page allows a user to enter data that is sent to a server for validation and processing. Web users fill out the forms using checkboxes, radio buttons, or text fields. For example when customer wants to buy a product in an ecommerce website, an html form can be used to enter billing and shipping address information for delivery. Following table shows different control inputs, their attributes, values and description.

Control Input Attributes Values Description
Check box type checkbox
name user defined name to be sent to server
value user defined value value of the box if selected
checked check the box by default


Your web browser doesn't have a PDF plugin. Instead you can click here to download the PDF file.

Want to contribute or ask a new article? Write and upload your article info .
Share