Lecture-1 by Praveen Kumar Jha
by Praveen Kumar Jha 1
HTML Stand for
by Praveen Kumar Jha 2
by Praveen Kumar Jha 3
What is html
Hypertext Markup Language (HTML) is the
standard markup language for creating web
pages and web applications.
Web browsers receive HTML documents from a web
server or from local storage and render them into
multimedia web pages.
HTML describes the structure of a web
page semantically and originally included cues for the
appearance of the document.
HTML is a markup language that web browsers use to
interpret and compose text, images, and other material
into visual or audible web pages.
by Praveen Kumar Jha 4
by Praveen Kumar Jha 5
History
1989- Berners-Lee wrote a memo proposing
an Internet-based hypertext system.
Berners-Lee specified HTML and wrote the browser
and server software in late 1990.
by Praveen Kumar Jha 6
by Praveen Kumar Jha 7
HTML Manage By
1. W3C( World Wide Web Consortium):-
The World Wide Web Consortium (W3C) is the main
international standards organization for the World Wide
Web (abbreviated WWW or W3).Founded and currently led by Tim
Berners-Lee,[3] the consortium is made up of member organizations
which maintain full-time staff for the purpose of working together in
the development of standards for the World Wide Web.
2. WHATWG(Web Hypertext Application
Technology Working Group) :-
The WHATWG was founded by individuals
from Apple, the Mozilla Foundation and Opera Software in 2004.
by Praveen Kumar Jha 8
by Praveen Kumar Jha 9
VERSION OF HTML
by Praveen Kumar Jha 10
Lecture-2 by Praveen Kumar Jha
by Praveen Kumar Jha 11
Editor
1. Notepad- for Window
2. SublimeText3
3. TextEdit- for Mac
Online IDE for Html
https://jsbin.com/?html,css,js,console,output
https://codepen.io/ (recommended)
http://plnkr.co/
by Praveen Kumar Jha 12
Lecture-3 by Praveen Kumar Jha
by Praveen Kumar Jha 13
Basic Structure of Html
by Praveen Kumar Jha 14
Basic Structure of Html
<!Doctype html>
<html>
<head>
<title> ..</title>
</head>
<body>
.
</body>
</html>
Top To Bottom
by Praveen Kumar Jha 15
Basic Structure of Html
Doctype:-
If you don't specify <!doctype> declaration then The page will be
interpreted in quirks mode(Styles won't work correctly, etc., i.e.,
quirks mode.)
The <!DOCTYPE> declaration represents the document type, and
helps browsers to display web pages correctly.
It must only appear once, at the top of the page (before any HTML
tags).
The <!DOCTYPE> declaration is not case sensitive.
The <!DOCTYPE> declaration for HTML5 is:
<!DOCTYPE html>
by Praveen Kumar Jha 16
Basic Structure of Html
<head>:-
The <head> element is a container for metadata (data about
data) and is placed between the <html> tag and the <body>
tag.
Metadata typically define the document title, character set,
styles, links, scripts, and other meta information.
The following tags describe metadata: <title>, <style>,
<meta>, <link>, <script>, and <base>.
by Praveen Kumar Jha 17
Basic Structure of <head>
<Title> element defines the title of the document
<head>
<title>Page Title</title>
</head>
<Style> he <style> element is used to define style information for a
single HTML page:
<head>
<style>
h1 {color: red;}
p {color: blue;}
</style>
</head>
by Praveen Kumar Jha 18
Basic Structure of <head>
<link> The <link> element is used to link to external style sheets:
<link rel="stylesheet" href="mystyle.css">
<meta>
1. <meta> element is used to specify which character set is used,
page description, keywords, author, and other metadata.
2. Metadata is used by browsers (how to display content), by search
engines (keywords), and other web services.
3. Define the character set used:
<meta charset="UTF-8">
by Praveen Kumar Jha 19
Basic Structure of <head>
Define a description of your web page:
<meta name="description" content="Free Web tutorials">
Define keywords for search engines:
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
Define the author of a page:
<meta name="author" content="John Doe">
Setting The Viewport
HTML5 introduced a method to let web designers take control over the
viewport, through the <meta> tag.
The viewport is the user's visible area of a web page. It varies with the
device, and will be smaller on a mobile phone than on a computer screen.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
by Praveen Kumar Jha 20
Basic Structure of Html
<body>
The <body> element contains the visible page content/
The <body> element contains all the contents of an
HTML document, such as text, hyperlinks, images,
tables, lists, etc.
Syntax
<body>
.
</body>
For more go to https://html.com/tags/body/
by Praveen Kumar Jha 21
Lecture-4 by Praveen Kumar Jha
by Praveen Kumar Jha 22
Introduction of tag and element
Html Element:-
Element are pieces themselves ie paragraph, header and even
body is an element
Most of the element contain other element
eg:- body contain header element, paragraph element
An element in HTML represents some kind of structure or
semantics and generally consists of a start tag, content, and
an end tag.
The following is a paragraph element:
<p> This is the content of the paragraph element. </p>
by Praveen Kumar Jha 23
Real life example to understand html Element
Elements are things like headers and
paragraphs and pictures that you see
in print and on web pages all the
time. For example. this page has
header, paragraphs, picture (image),
table, and list elements on it.
So an element is something that
appears in virtually all print (and web
pages)
by Praveen Kumar Jha 24
Introduction of tag and element
Html Tag:-
A tag is HTML code that you use to define each element
in your page. For example, <p></p> tags mark the beginning
and end of a paragraph element. The <img> tag identifies an
image (picture).
by Praveen Kumar Jha 25
Difference between HTML Element
and HTML Tag
by Praveen Kumar Jha 26
by Praveen Kumar Jha 27
