Create a Web page using HTML

Introduction to HTML 

Webpages are written in HTML - a simple scripting language. HTML stands for Hyper Text Markup Language.

Hypertext is simply a piece of text that works as a Link.
Markup Language is a way of writing layout information within documents.

Basically an HTML document is a plain text that contains text and nothing else. When a browser opens an HTML file, the browser will look for HTML codes in the text and use them to change the layout, insert images, create links to other pages. Since HTML documents are just text files they can be written in even the simplest text editor. Some of the most popular HTML editors, such as Frontpage or Dreamweaver will let you create pages more or less as you write documents in text editor you are using.

Why need to learn HTML?

It is possible to create webpages without knowing anything about the HTML source behind the page. There are excellent editors on the market that will care of the HTML parts. All you need to do is layout the page. However, if you want to make it above average in webdesign, it is strongly recommended that you understand tags

The most important benefits are

You can use tags the editor does not support.

You can read the code of other people pages and borrow the cool effects.

You can do the work yourself, when the editor simply refuses to create the effects you want.

You can write your HTML by hand with almost any available text editor, including notepad that comes as a standard program with windows. All you need to do is type in the code, then save the document, making sure to put an .html extension or an .htm extension to the file.

BUILD YOUR FIRST WEB PAGE

While getting started with HTML, you will likely encounter new and often strange terms. Over time you will become more and more familiar with all of them, but the three common HTML terms you should begin with are elements, tags and attributes.

Elements

Elements are designators that define the structure and content of objects within a page. Some of the more frequently used elements include multiple levels of heading (identified as <h1> through <h6> elements) and paragraphs (identified as <p> element), the list goes on to include the <a>, <div>, <span>, <strong> and <em> elements and many more.

Elements are identified by the use of less-than and grater-than angle brackets, < >, surrounding the element name. Thus an element look like <a>.

Tags

The use of less-than and greater-than angle brackets surrounding an element creates what is known as a tag. Tags most commonly occur in pairs of opening and closing tags.

• An opening tag marks the beginning of an element. It consists of a less-than sign followed by an element's name and then ends with a greater-than sign <div>.

•  A closing tag marks the end of an element. It consists of less-than sign followed by a forward slash and the elements name and then ends with a grater-than sign </div>.

The content that falls between the opening and closing tags is the content of that element. An anchor link will have an opening tag <a> and closing tag </a>. What falls between these two tags will be the content of the anchor link.

example: <a>........ </a>

Attributes

Attributes are properties used to provide additional information about an element. The most common attributes include the id attribute, which identifies an element; the class attribute, which classifies an element; the src attribute, which specifies a source for embeddable content and the href attribute, which provides a hyperlink reference to a linked resource.

Attributes are defined within the opening tag, after an elements name. Generally attributes include a name and a value. The format for these attributes consists of the attribute name followed by an equals sign and then a quoted attribute value.

example: <a href="http//studentzeal.com>

HTML Document Structure

HTML documents are plain text documents saved with an .html file extension or .htm extension rather than a .txt file extension. To begin writing HTML, you first need a plain text editor that you are comfortable using. Sadly this does not include Microsoft Word or pages, as those are rich text editors. Two of the more popular plain text editors for writing HTML and CSS are Dreamweaver and Sublime text. Free alternatives also include Notepad++ for windows and Textwrangler for Mac.

All HTML documents have a required structure that includes the following declaration and elements: <!DOCTYPE html>, <html>, <head> and <body>.

The document type declaration informs web browsers which version of HTML is being used and is placed at the very beginning of the HTML document. Because we will be using the latest version of HTML, our document type declaration is simply <!DOCTYPE html>. Following the documents type declaration, the <html> element signifies the beginning of the document.

The HTML document itself begins with <html> and ends with </html>. Inside the <html> element, the <head> element identifies the top of the document, including any metadata(information about the page). The content inside the <head> element is not displayed on the web page itself. Instead, it may include the document title, links to any external files or any other beneficial metadata.

All of the visible content within the webpage will fall within the <body> element.

Example: <!DOCTYPE html>

                 <html>

                 <body>

                 

                 <h1>Welcome to StudentZeal Trainings</h1>

                 <p>Studentzeal is a Educational start up which connects students to industry by providing various technology Trainings .</p>

                 </body>

                 </html>

HTML Headings

HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading.

<h6> defines the least important heading.

Example: 

                   <h1>Welcome to StudentZeal Education</h1>

                  <h2>Welcome to StudentZeal Education</h2>

                  <h3>Welcome to StudentZeal Education</h3>

                  <h4>Welcome to StudentZeal Education</h4>

                  <h5>Welcome to StudentZeal Education</h5>

                  <h6>Welcome to StudentZeal Education</h6>

HTML Paragraphs

HTML paragraphs are defined with the <p> tag

Example:

                <p>Studentzeal is a Educational start up which connects students to industry by providing various technology Trainings in classroom, online and colleges.</p>

                <p>It is a Technology driven start up where we provide education in a unique way.</p>

HTML Links

HTML Links are defined with <a> tag.

The Links destination is specified in the href attribute.

Attributes are used to provide additional information about HTML elements.

Example:

                 <a

                   href="https://www.studentzeal.com">Studentzeal </a>

HTML Images

HTML images are defined with the <img> tag.

The source file (src), alternative text (alt), width and height are provided as attributes.

Example:

                 <img src="studentzeal.jpg"

                 alt="studentzeal.com" width="250"

                 height="120">

Save the HTML Page

Save the file on your computer. Select File>Save as in the Notepad menu. Name the file "index.htm".

View the HTML Page in your Browser

Open the saved HTML file in your browser (double click on the file and choose "open with").