Html5 and css

संगोष्ठी पत्र
प्रश्नपत्र:- वेब टेक्नोलॉजी
ववषय:- HTML5 और CSS
मागगदर्गक
श्री अंजनी राय
सहायक प्रोफे सर
प्रस्तुतकताग
अंजना ककर्नपुरी
एम. आई. एल. ई.
दूसरी छमाही
अध्ययन सत्र-2016-17
कं प्यूटेर्नल भाषाववज्ञान ववभाग
महात्मा गांधी अंतरराष्रीय हहंदी ववश्वववद्यालय, वधाग

HTML
Hyper text markup language .
HTML को web pages create करने के लिए use लकया जाता है ।
HTML Berners Lee के द्वारा 1991 में create की गई थी ।
HTML elements , tags के द्वारा represent लकये जाते ह ।
ब्राउज़र HTML tags को प्रदलशित नहीं करता है ,िेलकन उन्हें
Document कैसे प्रदलशित करना है यह लनर्ािररत करते ह ।

HTML Versions
HTML 1.0 - 1991
यह HTML का पहिा version था ,उस समय बहुत कम िोग इस
language के बारे में जानते थे , और HTML भी बहुत limited थी ।
HTML 2.0 - 1995
इस version में HTML 1.0 के सभी features थे , इस version के साथ
ही HTML website development करने का बुलनयादी माध्यम बन चुकीं थी ।

 HTML 3.0 - 1996
इस version के आने तक HTML बहुत popular हो चुकी थी , इस
version में Browser के साथ Compatibility problem होने की वजह से इस
version को रोक लदया था ।
HTML 3.2 -1997
इस version में लपछिे version बाद कुछ नये tags add लकए गए , ये वो
time था जब W3C ने website development के लिए HTML को
Standard घोलित लकया था ।

HTML 4.01 - 1999
इस version में कुछ नये tags के साथ ही Casecading Style Sheet को
भी introduce लकया गया था ,इस समय HTML पूरी तरह Modern Language
बन चुकी थी।
 XHTML - 2000
इसमें HTML के साथ XML को add लकया गया था ।
 HTML 5 - 2014
यह HTML का latest version है ,इसमें multimedia support के लिए
कुछ नये tags provide लकए गए ह ।

HTML Tags
 एक html file, tags और text का Combination होती है ।
 Tags का basic structure :
<tagname> text </tagname>

A simple HTML program
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>My first web page</h1>
</body>
</html>

HTML 5
HTML5 इन्टरनेट की एक core technology है जो लक Opera
Software के द्वारा प्रस्तालवत की गई ह ।
इसका मुख्य िक्ष्य यह है लक latest multimedia के support के
साथ language को बेहतर बनाना ,जबलक यह मनुष्य द्वारा आसानी से
पठनीय हो और computer एवं device (web browsers,parsars
इत्यालद ) के द्वारा िगातार समझी जा सके ।

HTML5 के लिए कुछ लनयम स्थालपत लकए गए थे :-
 नई सुलवर्ाओंको HTML, CSS, DOM और javascript पर आर्ाररत
होना चालहए ।
 External plugins (like flash) की आवश्यकता कम हो ।
 Better error handling होनी चालहए ।
 HTML5 , Device Independent होना चालहए ।
 Development Process public को visible होनी चालहए ।

HTML 5 के New Features
Web Storage
Web Worker
Geolocation
PlaceHolder

New Semantic/Structural Elements
Tag Description
<article> Defines an article in the document
<aside>
Defines content aside from the page
content
<bdi>
Defines a part of text that might be
formatted in a different direction from
other text
<details>
Defines additional details that the user
can view or hide
<dialog> Defines a dialog box or window
<main> Defines the main content of a document
<figcaption>
Defines a caption for a <figure>
element
<figure>
Defines self-contained content, like
illustrations, diagrams, photos, code
listings, etc.

Tag Description
<footer>
Defines a footer for the document or a
section
<header>
Defines a header for the document or a
section
<mark> Defines marked or highlighted text
<menuitem>
Defines a command/menu item that the
user can invoke from a popup menu
<meter>
Defines a scalar measurement within a
known range (a gauge)
<nav> Defines navigation links in the document
<progress> Defines the progress of a task
<section> Defines a section in the document
<summary>
Defines a visible heading for a <details>
element
<time> Defines a date/time
<wbr> Defines a possible line-break

New Input Types
New Input Types New Input Attributes
•color
•date
•datetime
•datetime-local
•email
•month
•number
•range
•search
•tel
•time
•url
•week
•autocomplete
•autofocus
•form
•formaction
•formenctype
•formmethod
•formnovalidate
•formtarget
•height and width
•list
•min and max
•multiple
•pattern (regexp)
•Placeholder
•Required
•Step

HTML5 - New Attribute Syntax
Type Example
Empty
<input type="text" value="John"
disabled>
Unquoted <input type="text" value=John>
Double-quoted <input type="text" value="John Doe">
Single-quoted <input type="text" value='John Doe'>

HTML5 Graphics
Canvas
 HTML <canvas> element का उपयोग Graphics को draw करने के
लिए लकया जाता है ।
 ग्रालिक्स को draw करने के लिए javascript का use लकया जाता है।
उदहारण :- var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50);
 Your browser does not support the canvas element .

SVG
 SVG stands for Scalable Vector Graphics .
 SVG का use web के लिए ग्रालिक्स define करने के लिए लकया जाता है ।
उदहारण :- <svg width="400" height="100">
<rect width="400" height="100" style="fill:rgb(0,0,255);stroke-
width:10;stroke:rgb(0,0,0)" />
</svg>

HTML Media Elements
 <video> Defines video और movie
उदहारण :- <video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
 <audio>Defines sound content
उदहारण :- <audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>

Casecading Style Sheet
 CSS एक designing language है । CSS के द्वारा HTML tags पर
designing apply कर सकते ह ।
 CSS से webpages की presentation को control कर सकते ह । CSS से
webpages का text color , font family , background , margin ,
padding और position आलद set कर सकते ह ।
 CSS property और value के context में काम करती है । जैसे लक यलद आप
webpage का background-color change करना चाहते ह तो
background-color property है और आप जो value देंगे वह इसकी
value होगी ।
property:value

CSS तीन तरह से apply होती हैं :-
 Inline – इस method में CSS को HTML tag के अंदर ही define कर देते
ह । ऐसा style attribute के द्वारा करते ह ।
 Internal –इस method में CSS को HTML tag में define करने के
बजाए HTML file के <head> tag में script tag की मदद से
define करते ह ।
 External –इस method में HTML file और CSS file अिग-अिग होती
है । HTML file में CSS file <link> attribute के द्वारा add
करते ह ।

Applying CSS
 Inline Style Sheet
<html>
<head>
<title> Inline CSS Demo </title>
</head>
<body style = “background-color : red ;”>
<p> this is Inline CSS Demo </p>
</body>
</html>

 Internal Style Sheet
<html>
<head>
<style>
Body
{
Background-color : red ;
}
</style>
</head>
</html>

External Style Sheet
<html>
<head>
<link rel=“stylesheet” type=“text/css” href=“yourfile.css”>
</head>
<body>
<h1> External Style Sheet </h1>
</body>
</html>

संदभि सूची
 http://www.ijceronline.com/papers/Vol2_issue5/AR025143014
37.pdf
 https://www.codeproject.com/articles/758616/new-features-in-
html
 https://code.tutsplus.com/tutorials/28-html5-features-tips-and-
techniques-you-must-know--net-13520
 https://www.w3schools.com/html/html_media.asp
 http://www.html5andcss3.org/html5history.php

Html5 and css

Recommended

Recommended

More Related Content

Featured

Featured (20)

Html5 and css