Html

17
Introduction To HTML

Transcript of Html

Page 1: Html

Introduction To HTML

Page 2: Html

HTML stands for Hyper Text Markup Language.

HTML was developed by Tim Berners-Lee.

HTML is maintained by World Wide Web Consortium(W3C).

HTML first introduced in 1991 as HTML tags.

Extended from SGML and extended to XHTML.

Introduction

Page 3: Html

HTML is Hyper Text Markup Language, as Hypertext refers to the process of linking text to data on the interne while markup means modification so HTML is a language that is used or that allow user to organize and improve the appearance of text on internet.

HTML is used to create and design WebPages. Site authors use HTML to format text as titles and headings, to arrange graphics on a webpage, to link to different pages within a website, and to link to different websites.

HTML is easy to learn and use.

Why HTML??? ?

Page 4: Html

HTML VERSIONS

Year Version

1991 HTML

1995 HTML2.0

1997 HTML3.7

1998 HTML4.0

2008 HTML 5

Page 5: Html

HOW TO CREATE HTML DOCUMENT??? ?

Step 1: Open Notepad,

Start All Programs Accessories   Notepad

o Step 2: Write HTML code in Notepad

Page 6: Html

Step 3: Save the file with .html or .htm extension.

Step 4: Open the .html file with any of the Web browser.

Page 7: Html

HTML COMPONENTS

HTML Elements: An HTML element is everything from the start tag to the end tag.

<p> This is Paragraph</p>

<p> is opening tag and </p> is closing tag.

*always close the opening tag.

HTML Attribute:

Attributes provide additional information about an element.

<a href="http://www.facebook.com">This is a

link</a>

* Attribute values should always be enclosed in

quotes.

Page 8: Html

HTML Heading: Headings are defined with the <h1> to <h6> tags.

<h1> This is a Heading </h1>

*The size of Heading decreases as we do from h1 to h6.

HTML Paragraphs: HTML documents are divided into paragraphs.

<p>This is paragraph</p>

Formatting Tags:

HTML COMPONENTS

Tag Description

<b> Defines bold text

<i> Defines italic text

<strong> Defines stronger text

Page 9: Html

HTML Links: The HTML <a> tag defines a hyperlink. A hyperlink (or link) is a word, group of words, or

image that you can click on to jump to another document.

<a href="url">Link text</a>

HTML Image: In HTML, images are defined with the <img> tag.

<img src="url" alt="some_text">

*src stands for source and url have path of image stored in

desktop.

HTML COMPONENTS

Page 10: Html

HTML Tables:• Tables are defined with the <table> tag.

HTML COMPONENTS

*A table is divided into rows (tr) and each rows are divided into data cells. Data cells have table data(td), and table border can be set by using <table border=“1”> tag.

Page 11: Html

HTML List:List are of two type :

HTML COMPONENTS

Unorderd List<html><body><h4>An Unordered List:</h4><ul> <li>Radhe</li> <li>Krishna</li> <li>Rajan</li></ul></body></html>

An Unordered List:•Radhe •Krishna •Rajan

Ordered List<html><body><h4>An Ordered List:</h4><ol> <li>Radhe</li> <li>Krishna</li> <li>Rajan</li></ol></body></html>

An Ordered List:1. Radhe2. Krishna3. Rajan

Page 12: Html

HTML Forms:* HTML forms are used to pass data to the server.

HTML forms can contains elements like Textbox, Radio buttons ,submit buttons and more… .Forms are written under <form> tag .

<form>

Elements

</form>

Textbox:<form>First name: <input type="text" name="firstname"><br>Last name: <input type="text" name="lastname"></form>

First name: 

Last name: 

HTML COMPONENTS

Page 13: Html

HTML COMPONENTS

Password Field: <form>Password: <input type="password" name="pwd"></form>Password:

Radio Buttons: <form><input type="radio" name=“city" value=“delhi">Male<br><input type="radio" name=“city" value=“kolkata">Female</form>

• Delhi• Kolkata

Checkboxes:<form><input type="checkbox" name="vehicle" value="Bike">I have a bike<br><input type="checkbox" name="vehicle" value="Car">I have a car </form>

I have a Bike I have a car

Submit Button:<form>Username: <input type="text" name="user"><input type="submit" value="Submit"></form> Username: Submit

Page 14: Html

HTML WITH CSS AND JAVASCRIPT

HTML become more stylish and easy to use

after combination of CSS(Cascading Style

Sheet) and JavaScript.

CSS was introduced along with HTML 4.0 to

provide better style.

JavaScript make HTML more dynamic and

user interactive.

Page 15: Html

CSS IN HTML CSS can be added to HTML in three ways:

Inline Internal External

Inline: It is applied for single occurrence of events.

For inline <style> tag is used.

<p style="color:blue;margin-left:20px;">This is a paragraph.</p>

Internal: it is used if one single document has a unique style.

This is written inside <head> tag.

<head><style type="text/css">body {background-color:yellow;}p {color:blue;}</style></head>

External: When one style is applicable to many pages then this style is used.

<head><link rel="stylesheet" type="text/css" href=“filename.css"></head>

Page 16: Html

DIFFERENCE BETWEEN HTML AND XML

HTML XML

It is Client Site Scripting It is Server site Scripting

All the tags are predefined User defined tags are available

It cann’t be compiled It can be compiled

It can display the web pages It cann’t be displayed

It is not case sensitive It is case sensitive

• HTML Hyper Text Markup Language• XML Extensible Markup Language