Skip to main content

HTML Basic

HTML (Hypertext Markup Language) Basic

What is HTML ?

HTML invented by Tim Berners-Lee in 1990. HTML stands for hypertext markup language.
Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages .We can create web page with different elements like audio, video, image, tables, link, list & text etc, with CSS & JavaScript.
version of HTML
There are 6 version of HTML
HTML VersionYear
HTML1991
HTML 2.01995
HTML 3.21997
HTML 4.011999
XHTML2000
HTML 52014 (Latest version)
Latest version of HTML
Latest version of html is HTML 5.0 , in latest version of html provided new tags for multimedia support.
Now we are creating web page  index.html 
How we can create Web page
<!DOCTYPE html>
<html>
    <head>
        <title>This is my First Web Page</title>
    </head>
    <body>
        <h1>My First heading </h1>
        <p>My First Paragraph </p>
    </body>
</html>
Output would be
Inside index.html we used these tags
<!DOCTYPE html> the DOCTYPE tells web browsers, what type of document the file is .
<html> “html” tag tells the browser it is HTML document . “html” tag is container for all HTML element . except <!DOCTYPE html> tag .
<head> tag is used to define document header , we can keep <link> , <title>& <script>tag here .
<title> tag is used to define title of document
<body> tag is used to define body of document
<h1> tag is used to define heading .
<p> tag is used to define paragraph .
when web page render on browser , first browser read doctype version of html , then it comes in <html> inside this tag all tags are available . browser craete a DOM tree. & read all tags one by one . browser is not wait for all css & javacsript file load or not it will render all tages on web page.

Basic elements

Html basic element has start tag & end tag
Example <p> start tag , end tag </p>.
In html some of element which don’t need closing tag , these elements are knows as Void elements .
Example <img.../>, <hr /> and <br />
<p> This is paragraph content.
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> These are heading tags with different font size.
Example
different types of heading tag behavior in browser
<!DOCTYPE html>
<html>
<head>
    <title>This is my First Web Page</title>
</head>
<body style="background-color: lightgray">
   <h1>This is my main heading</h1>
   <h2> This is my Second heading</h2>
   <h3> This is my Third heading</h3>
   <h4> This is my Fourth heading</h4>
   <h5> This is my Fifth heading</h5>
   <h6>This is my Sixth Heading</h6>
</body>
 </html>
Output would be

<div> use for division content
<br/> Line break
<hr> use for horizontal rule .
<input> provide field where user can enter data .it contains attribute linke “type” “submit” & “name” etc. input tag written with form tag.
Example
input tag behaviour on browser
<!DOCTYPE html>
<html>
<head>
    <title>This is my First Web Page</title>
</head>
<body style="background-color: lightgray">
    <form action="/action_page.php">
        First name:<br>
        <input type="text" name="firstname" value="Jhon"><br>
        Last name:<br>
        <input type="text" name="lastname" value="Doe"><br><br>
        <input type="submit" value="Submit">
      </form>
 </body>
 </html>
Output would be

HTML Element Categories

  • Block Elements
  • Inline HTML Elements
  • List-item Elements
Block Elements
Block Level elements always start from new line or such kind of elements have break line before & after the elements. & take full width available.
Element NameDescription
DIVA container allowing specific style to be added to a block of text.
PParagraph - Should not contain other block elements including tables, but may contain list elements & span tag.
PREPreformatted text is rendered with spaces and carriage returns as typed.
TABLEUsed to present an ordered set of data. Table subelements work as block elements. Includes table sub elements.
FORMUsed to present a form to the client. Form subelements work as block elements.
ADDRESSSupplies contact information for the document.
BLOCKQUOTEUsed to quote in block form.
DIRA container allowing specific style to be added to a block of text.
FRAMESETA container allowing multiple frames (HTML documents) to be placed on a web browser.
H1, H2, H3, H4, H5, H6Headings
HRHorizontal rule
NOFRAMESAlternate content for browsers that do not support frames.
NOSCRIPTAlternate content for browsers that cannot run script programs
CENTERDepreciated
ISINDEXAn input prompt for a single line of text. Depreciated
Inline HTML Elements
Inline element does not start on new line. these element does not take full width of page, only the space bounded by its opening and closing tag.
Element NameDescription
AAnchor tag. can provide link inside href attribute.
SPANA container used to set special style to specific areas of the page.
IMGAllows placement of a graphical image in the page.
TEXTAREAA form for multiline text input.
ABBRDenotes an abbreviation Phrase
ACRONYMDenotes an acronym.
AREADefine a map region in an image. Inside the MAP element -
BBold Font -
BDOOverrides text direction with values of ltr (left to right) or rtl (right to left). - -
BIGSets size of text to big.
BRBreak Treated special by style sheets.
CITEUsed to mark titles of articles or other publications.
CODEDenotes computer program code.
DFNDenotes a definition.
EMDenotes emphasis
ISets text to italics
INSDenotes inserted text.
KBDDenotes information typed from the keyboard.
PARAMUsed to add additional parameters to the object or applet elements. -
SAMPDenotes a sample.
SMALLSets text size to small Font
STRIKESets text to have a line struck through it
SUBSubscript
SUPSuperscript
TTSets text style to monospaced teletype Font
VARDenotes a variablein a program.
SStrike through text Font Depreciated
USets text underlined .Depreciated
FONTAllows font changes.Depreciated
BASEFONTAllows font changes - Depreciated
List-item Elements
List elements provide list of items. these are mostly block level elements.
Element NameDescription
LIList Item
ULUnordered List
DLDefinition List
OLOrdered (numbered) List
DIRDirectory List Depreciated

Is HTML tags are case insensitive ?

HTML tags are case insensitive you can write <h1> like this <H1> or <p> as <P> .But careful while writing their attributes like class or id & some other attributes. The attributes are case sensitive always.
Fisrt.html
<!DOCTYPE html>
<html>
<head>
    <title>This is my First Web Page</title>
</head>
<body>
    <h1>Is HTML case insensitive ?</h1>
    <p>This is my paragraph</p>
</body>
</html>
Out would be for first.html
second.html

 
<!DOCTYPE html>
<html>
<head>
    <title>This is my First Web Page</title>
</head>
<body>
    <H1>Is HTML case insensitive ?</H1>
    <P>This is my paragraph</P>
</body>
</html>
out would be for second.html

So you can see above output for both html will give same result in webpage . so we can say HTML is case insensitive .

Formatting Elements

<blockquote ></ blockquote> Use to highlight of the paragraph.
<s></s> Use for strikethrough.
<big></big> Use to create big text without written any font size.
<tt></tt> Use for monotype font.
<sup></sup> Use for super script text.
<sub></sub> use for subscript.
<center></center> Use for text center.
<small></small> Use for small text.
<b></b> Use for bold text.
<i></i> Use for italic text.
<u></u> Use for text underline
<strong></strong> Use for bold text . bold & strong give same behavior.
<emphasize></emphasize> Use for italic text .
<bdo></bdo> use for Bi-directional override , in “bdo” we can use “dir” attribute its have 2 values “rtl”(right to left) & “ltr” (left to right) .
we can see behaviour all elements on webpage . i have create example.html file
<!DOCTYPE html>
<html>
`<head>
    <title>This is my First Web Page</title>
</head>
<body style="background-color: lightgray">
    <blockquote>used for highlight of paragraph .</blockquote> <br/>
    <s> use for strikethrough </s> <br/>
    <big>use create big text without write any font size .</big> <br/>
    <tt>use monotype font </tt><br/>
    <p> use for subscript <sub>subscript</sub></p><br/>
    <p>use for subscript <sup>superscript</sub></p><br/>
    <center>  used text center </center><br/>
    <small> use for small text</small>  <br/>
    <b> use for bold text</b><br/>
    <i> use for italic text</i><br/>
    <u>use for text underline  </u><br/>
    <strong>use for bold text . bold & strong give same behavior. </strong> <br/>
    <emphasize>use for italic text </emphasize><br/>
    <bdo dir="rtl"> Bi-directional override .in "bdo" we can use "dir"
            attribute its have 2 values "rtl"(right to left) & "ltr"(left to right)
    </bdo> <br/>
    <bdo dir="ltr"> Bi-directional override  , in "bdo" we can use "dir" 
            attribute its have 2 values “rtl”(right to left) & "ltr" (left to right)
     </bdo> <br/>
 </body>
 </html>
when i run this code on browser , result would be .

Comments

Post a Comment

Popular

JavaScript type hoisting with variable function Expression

JavaScript type hoisting with variable function Expression Hoisting is JavaScript default behavior to moving declaration on the top. Variable can be used before its declaration. To understand this, first we need to understand of hoist meaning, hoist means “raise(something) by means of ropes & pulleys”. now we can relate hoisting with JavaScript. JavaScript interpreter moves all declaration on the top at runtime. It is best practice to declare all variable at the top of their respective scopes. , JavaScript is loosely syntax language so it will not throw any error at runtime if the variable used before its declaration. But JavaScript does not allow variable used before its declaration in “use strict” mode. Example 1 In this example, we can see in a normal scenario, when y has declared & then used. in this case, it will give output 10 as excepted. <p id= "demo" ></p> <script> var y; //Declare y y = 10 ;
4 comments
Read more

Life cycle hook

In Angular, every component has a life-cycle, a number of different stages it goes through. Creates the component Renders the component Creates and renders the component children Checks when the component data-bound properties change, and  Destroys the component before removing it from the DOM ngOnChanges this method is called  once  on component’s creation and then  every time changes  are detected in one of the component’s  input  properties. export class MyComponent implements OnChanges { ngOnChanges(changes: SimpleChanges) { // Insert Logic Here! } }   ngOnInit Invoked when given component has been initialized. This hook is only called  once  after the first  ngOnChanges export class MyComponent implements OnInit { ngOnInit() { // Insert Logic Here! } }     ngDoCheck Invoked when the change detector of the given component is invoked. It allows us to implement our own change detection algorithm for the given component. export class MyComponent implements D
Post a Comment
Read more

DOM(Document Object Model) and BOM(Browser Object Model)

DOM(Document Object Model) The DOM is the Document Object Model, which deals with the document, the HTML elements themselves, It organize the elements of the document in tree structure (DOM tree) and in the DOM tree, all elements of the document are defined as objects (tree nodes) which have properties and methods.When a web page is loaded, the browser creates a DOM tree for all the objects (Html elements) of that page. e.g. document and all traversal you would do in it, events, etc. A Simple DOM Tree BOM(Browser Object Model) The BOM is the Browser Object Model, which deals with browser components aside from the document,like history, location, navigator and screen (as well as some others that vary by browser). The Browser Object Model (BOM) in JavaScript includes the properties and methods for JavaScript to interact with the web browser. BOM provides you with window object, for example, to show the width and height of the window. It also includes the window.scre
Post a Comment
Read more