introduction to html

Satinderpal Kaur MBA3(D)

INTRODUCTION TO HTML

HTML is a markup language. It tells the web browser what content to display. HTML separates "content" (words, images, audio, video, and so on) from "presentation" (the definition of the type of content and the instructions for how that type of content should be displayed). HTML uses a pre-defined set of elements to identify content types. Elements contain one or more "tags" that contain or express content. Tags are surrounded by angle brackets, and the "closing" tag (the one that indicates the end of the content) is prefixed by a forward slash.

HTML (Hyper Text Markup Language) is a markup language which consists of tags embedded in the text of a document. The browser reading the document interprets these markup tags to help format the document for subsequent display to a reader. However, many of the decisions about layout are made by the browser. Remember, web browsers are available for a wide variety of computer systems.

HTML stands for Hyper Text Markup Language. HTML is a language for describing web pages. HTML is not a programming language, it is a markup language. HTML uses markup tags to describe web pages. HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. It can embed scripts written in languages such as JavaScript which affect the behavior of HTML web pages.

The browser thus displays the document with regard to features that the viewer selects either explicitly or implicitly. Factors affecting the layout and presentation include:

The markup tags used. The physical page width. The fonts used to display the text. The color depth of the display.

HTML is a language for describing web pages.

HTML stands for Hyper Text Markup Language HTML is a markup language A markup language is a set of markup tags The tags describe document content HTML documents contain HTML tags and plain text HTML documents are also called web pages

Aesthetically, an HTML website can look just as appealing as a website using the more advanced technologies. It is easy to be swayed by the desire to be 'up with the times'. However, getting yourself a well made HTML website may be a wiser and more progressive decision for your business than getting a high-tech website.

FEATURES OF HTML

Chandigarh Business School


1. HTML is easy to use and understand

Almost anyone in the web development business would know HTML – be it a freelancer or a large agency. If at any point in time you need to hire the services of a different web design firm or professional for making changes or updates to your website, it would be relatively easy to find cost-effective and affordable solution providers who can make the changes you need to your website.

2. All browsers support HTML

Almost – if not all – browsers support HTML. Certainly more browsers support HTML than any other web programming language. As a result, when you build a website using HTML, it would show up on most browsers around the world, as long as the programmer takes care to optimize the website for the most commonly used browsers. Optimizing an HTML based website for browser compatibility is neither difficult nor complex.

3. HTML and XML syntax is very similar

Today, XML is increasingly being used for data storage. The similarity of syntax between HTML and XML means that it is easier and seamless working between the two platforms.

4. HTML is free

A major advantage of HTML is that it is free. You do not need any software for HTML, no plug-ins are needed and it means that you can save considerably on your website development cost. Even with open source content management systems, all the plug-ins that you may need are not always free.

5. Most development tools support HTML

Whether it is FrontPage, Dream Weaver or any other programming tool, there are more web development tools that allow you to create HTML based websites, than any other web programming language.

6. HTML is most search engine friendly

Of all the web programming languages, HTML is the most search engine friendly. Creating SEO compliant websites using HTML is significantly easier than any other programming language. HTML causes the least SEO complications and provides the greatest flexibility when trying to build an SEO compliant website. As long as you have taken care to ensure your HTML code is clean and validated, an HTML website is easiest to read and access for search engine crawlers. This reduces crawling time and improves page load time, helping your website perform better in search results.

WHAT ARE HTML TAGS?



When a web browser displays a page such as the one you are reading now, it reads from a plain text file, and looks for special codes or "tags" that are marked by the < and > signs. The general format for a HTML tag is:

TYPES OF TAGS:-

1. Open/ended tag :-[<br/>,<link/>,<img/>]

2. Start/Close tag:- [<body>,</body>,<title>,</title>]

3. <strike>..<strike> or <s>.. </s> Tag

The HTML strike tag renders a <strike>strike</strike> (or <strike>line</strike>) through the middle of the text.

Result: The HTML strike tag renders a strike (or line) through the middle of the text. Note:- <br/> is only used in earlier version but now <br > only used

4. Header tags:-[<h1>,<h2>…..<h6>] <tag_name>string of text</tag_name> As an example, the title for this section uses a header tag: <h3>What are HTML tags?</h3> HTML tags may tell a web browser to bold the text, italicize it,make it into a

header, or make it be a hypertext link to another web page. It is important to note that the ending tag,

</tag_name> contains the "/" slash character. This "/" slash tells a web browser to stop tagging the text.

EXAMPLE:-


<html>

<head>

<title>Volcano Web</title>

</head>



<body>

In this lesson we will use the Internet to research information on volcanoes and then write a report on our results.

</body>

</html>

Save the document as a file called "volc.html"

The <title> tag is used to uniquely identify each document and is also displayed in the title bar of the browser window. The <title>...</title> tag is located in the <head>...</head> portion and thus will not be visible on the screen.

The text between <html> and </html> describes the web page.The text between <body> and </body> is the visible on page content.

The text between <html> and </html> describes the web page.The text between <body> and </body> is the visible page content

STEP TO CREATE WEB PAGE


Step 1: Open Notepad

To open Notepad in Windows 7 or earlier: Click Start (bottom left on your screen). Click All Programs. Click Accessories.

Click Notepad. To open Notepad in Windows 8 or later: Open the Start Screen (the window symbol at the bottom left on your screen). Type

Notepad.

Step 2: Write Some HTML

Write or copy some HTML into Notepad.

Example:-

<html><body><h1>My First Heading</h1><p>My first paragraph.</p></body></html>

Step 3: Save the HTML Page



Save the file on your computer.

Select File -> Save as in the Notepad menu.

When saving an HTML file, use either the .html or the .html file extension. There is no difference; it is entirely up to you.

Step 4: View HTML Page in Your Browser

Double-click your saved HTML file, and the result will look much like this:-

1) Create a welcome screen using html tags.



<html><head><body>

<p>welcome to my page</p></body></head></html>

Output:-

View HTML Page in Browser

Double-click on saved HTML file, and the result will look much like this:-

2) Create a web page using list tag



(a) Create a web page using ORDERED LIST

<html>

<head>

<br><b>welcome to my page</b></br>

<ol type=A START=7>

<li>chandigarh

<li>himachal

<li>haryana

</Ol>

</head>

</html>

Output:-



b) Create a web page using UNORDERED LIST



<html>

<head>

<br><b>welcome to my page</b></br>

<ul type=square>

<li>chandigarh

<li>himachal

<li>haryana

</ul>

</head>

</html>

Output:-


Double-click on saved HTML file, and the result will look much like this:

3) Create a web page using image tag



<html>

<head>

<body style="background-color:yellow">

<h3 style="background-color:green">this is a heading</h3>

<p style="background-color:red">this is a paragraph</p>

<img src="chrysanthemum.jpg"/>

</body>

</head>

</html>

Output:-



4) Create a web page using formatting tag

<html>



<head>

<body style="background-color:yellow">

<h1 style="font-family:verdana;color:red">A heading</h1>

<p sytle="font-family:arial;color:white;font-size:30px">A paragraph</p>

<img src="chrysanthemum.jpg"/>

</body>

</head>

</html>

Output:-

View HTML Page in Browse


5) Create a web page using ancher tag

<html>



<head>

<body>

<p>welcome to page</p>

<a href="satinder.html"target="_blank">link to next page</a>

</body>

</head>

</html>

Output:-


Double-click on saved HTML file, and the result will look much like this. When we click on the link to next page, then next page will be open.

After click on link we can see following:-



6) Create a web page using table tag



<html>

<head>

<title>my document</title>

</head>

<body>

<h3 align="centre" font-size:"20%">chandigarh university</h3>

<table align="centre" border="1" height="50%" width="50%">

<tr bgcolor="red" align="left">

<th>name</th>

<th>class</th>

<th>rollno</th>

</tr>

<tr bgcolor="green">

<td>satinder</td>

<td>mba</td>

<td>589</td>

</tr>

<tr bgcolor="pink">

<td>sunita</td>

<td>mba</td>

<td>608<td>

</tr>

</table>

</html>

Output:-





7) Create a web page using top frameset



<html>

<head>

<title>Frameset page</title>

</head>

<frameset rows= "35%,*">

<frame src="satinder.html"/>

<frameset cols= "30%,35%">

<frame src="welcomer.html"/>

<frame src="welcomel.html"/>

</frameset>

</html>

Output:-



8) Create a admission form using form tag in HTML



<form action="frameset rows1 2 column.html" method="get">

<fieldset>

<legend>personalia:</legend></br>

First Name:<input type="text" size="30"/></br>

Last Name:<input type="text" size="30"/></br>

Graduation %:<input type="text" size="30"/></br>

Phone No.:<input type="text" size="30"/></br>

Email:<input type="text" size="30"/></br>

Date of Birth:<input type="text" size="30"/></br>

<input type="submit" value="Submit"/>

<input type="reset" value="Reset"/>

</form>

Output:-


After click on submit button we can see following:-


introduction to html

Documents

html tags

html website

html elements

html stands

html allowsimages

markup tags

behavior of html web

web programming language