Overview

What is HTML?

• HTMl stands for Hyper text markup language .
• Here tags are used to identify content .
• HTML is the Web structure .
• HTML tags are two types ,
• 1. Small tags : Has no end tag .
     Eg: br , img ,input,..etc
  2. Big tags : Has both starting and ending tags .
     Eg: a , p , div ,..etc
• HTML file have an extension as .html or .htm
• HTML is full of Elements .

Basic HTML Document structure

• Now we are learning HTML5 .
• So , let's dive into it .

• BASIC STRUCTURE

< html >
< head >
< !-- Non-visual part -->
< title>BASIC PAGE< /title >
< /head >
< body >
< !-- Visual part -->
< /body >
< /html >


Basic HTML tag Syntax

• Syntax
  
  < tagname attributename = "value"> Related text < / tagname>

Basic concepts

HTML elements

• Everything in HTML document comes under HTML elements .
• These HTML elements are categorized into
  1. Inline elements
     • Inline elements are normally displayed without line break .
     • We cannot insert block level elements .
     • Example : < span > , < a > , < em > ,...
  2. Block level elements
     • Block level elements start from new line .
     • we can insert inline elements in block level elements .
     • Example : < div > , < form > , < table > ,...

Paragraphs

• Any type of text can be written inside paragraph tag .
• Browers automatically adds an empty line before and after a paragraph .

• Syntax of paragraph tag
  
  < p > What ever the text you need . < /p >

Text Formatting

• In HTML we have list of HTML styles .They are ,

• Here is the list !
  
  < p > This is normal Text style < /p >
  
  < big > This is Big text < /big >
  
  < Small > This is small text < /small >
  
  < i > This is italic text < /i >
  
  < strong > This is strong text < /strong >
  
  < sup > ^{This is superscripted text} < /sup >
  
  < sub > _{This is subscripted text} < /sub >
  
  < ins > This is inserted text < /ins >
  
  < del > This is deleted text < /del >
  
  < em > This is emphasis text < /em >
  
  < b > This is bold text < /b >
  
  < !--Heading formats-- >
  
  
  < h1 > This is h1 text < /h1 >
  
  < h2 > This is h2 text < /h2 >
  
  < h3 > This is h1 text < /h3 >
  
  < h4 > This is h4 text < /h4 >
  
  < h5 > This is h5 text < /h5 >
  
  < h6 > This is h6 text < /h6 >
  

Attributes

• Attributes provides additional information of HTML elements .
• Attributes are specified in the starting tag .

• Basic attribute syntax
  
  attributename = "value";

• Example : align ="center" , color="red" , bgcolor="black" ,....

Images

• We can add Images( .jpg , .png , ..) to our page .
• Image tag only contains Attributes .
• It is a small tag i.e., has no end tag .

• Basic syntax
  
  < img src="url" alt="description of image" width="xpx" height="ypx" >

Links

• Used to redirect to another file or webpage .
• LInks can be either absolute or relative .

• Basic syntax
  
  < a href="url" target="_blank" > Text / Image < /a >





• Example : Click here to known About me

Tables

• Tables are divided into Tables rows and columns .

• Basic syntax
  
  < caption > Table Title < /caption > < table >
  < tr >
  < th >Head 1< /th >
  .
  .
  < /tr >
  < tr >
  < td > data < /td >
  .
  .
  .
  < /tr >
  .
  .
  < /table >
  

• Example
  
  Student Information

  S.NO	NAME OF THE STUDENT	ROLL NUMBER	BRANCH-YEAR
  1	Pettem Srikanth	17017T0921	CSE Final YEAR
  2	Erry Rakesh Reddy	17017T0907	CSE Final YEAR
  3	Chelikani Anil	17017T0906	CSE Final YEAR
  4	Bukya Ram	17017T1803	IT Final YEAR

Forms

• To collect information from the user .
• Usually the form is submitted to a webpage on the web server .

• Basic syntax
  
  
  < label for="forms">STUDENT DATA< /label>
  < form class="student" action="index.html" method="post">
  < label for="">Name of the student< /label>
  < input type="text" name="" value="" placeholder="Enter Your Name" autofocus required alt="NAME" multiple>
  < label for="">Roll NUmber< /label>
  < input type="text" name="" value="" placeholder="Enter Your RollNumber" autofocus autocomplete="N/A" required alt="roll">
  < label for="">DOB< /label>
  < input type="date" name="DATE" value="20/11/200" required autofocus placeholder="Enter Your DOB" autocomplete="N/A">
  < label for="">TIME< /label>
  < input type="time" name="" value="" required placeholder="TIME">
  < label for="">EMAIL< /label>
  < input type="email" name="" value="" required placeholder="EMAIL">
  < label for="">COLOR< /label>
  < input type="color" name="" value="" required placeholder="COLOR">
  < label for="">IMAGE UPLOAD< /label>
  < input type="image" name="" value="" required placeholder="IMAGE">
  < label for="">FILE UPLOAD< /label>
  < input type="file" name="" value="" required placeholder="FILE">
  < label for="">URL< /label>
  < input type="url" name="" value="" required placeholder="URL">
  < label for="">I here by declare< /label>
  < input type="checkbox" name="" value="" required placeholder="CHECKBOX">
  < label for="">RANGE< /label>
  < input type="range" name="" value="" required placeholder="RANGE">
  < label for="">PASSWORD< /label>
  < input type="password" name="" value="" required placeholder="password">
  < label for="">LOCAL_TIME< /label>
  < input type="datetime-local" name="" value="" required placeholder="LOCALTIME">
  < label for="">PROCCED TO SUBMIT< /label>
  < input type="submit" name="sub" value="" placeholder="submit">
  < /form>
  
  

• Example :
  
  STUDENT DATA
  Name of the student Roll NUmber DOB TIME EMAIL COLOR IMAGE UPLOAD FILE UPLOAD URL I here by declare RANGE PASSWORD LOCAL_TIME PROCCED TO SUBMIT

HTML colors

• HTML colors are expressed as
• • Hexa decimal values( i.e., 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F )
  • Color names

• Basic syntax
  
  < b style="color:red;">red< /b>
  < b style="color:#f00;">red< /b>
  < b style="color:#ff0000;">red< /b>
  < b style="color:rgb(f,f,f);">white< /b>
  < b style="color:rgba(f,f,f,1);">white< /b>
  < b style="color:hsl(0, 100%, 100%);">white< /b>
  

• Example :
  red
  red
  red
  red
  red
  red
  

Dive little bit more

• Content Models

  • So for we assumed that HTML elements either belong to Inline or Block elements .
  • But now we have seven different content models .
  • Every HTML element belongs to one or more of these models .
  • 7 content models are
    
    
    1. Metadata
       
       Content that sets up the presentation or behavior of the rest of the content .
       
       
       
    2. Embedded
       
       Content that imports other resources into the document .
       
       
       
    3. Interactive
       
       Content sepcifically intended for user interaction .
       
       
       
    4. Heading
       
       Content that defines a section header .
       
       
       
    5. Phrasing
       
       Content that has a number of inline level elements .
       
       
       
    6. Flow
       
       Content that includes majority of HTML5 elements .
       
       
       
    7. Sectioning
       
       Content that defines the scope of headings,navigation,content and footers .
       
       
       

• Header , nav and footer

  • Header tag is used to define the head part of the HTML document . Top of the webpage .
  • Footer tag is used to define the contact information , privacy policy , copyright information etc . Bottem of the webpage .
  • nav tag is a collection or list of < a > tags .

  • Basic syntax
    
    
    < header>
    HEAD OF THE SMALL PAGE
    < /header>
    < nav>
    < ul>
    < li>
    < a href="#home">HOME< /a>
    < /li>
    < li>
    < a href="https://pettemsrikanth.github.io/">About me< /a>
    < /li>
    < /ul>
    < /nav>
    < footer>
    All ©-2020 copyrights are reserved by WE FOR US
    < /footer>

  • Example :
    
    

    HEAD OF THE SMALL PAGE

    ---

    ---

• Article ,section and aside

  • Article is a self contained , independent piece of content that can be used and distributed separately from the rest of the page or site .
  • Section is a logical container of the page or article .
  • Each section should be identified , typically by including a heading (h1-h6) as a child element .
  • Aside is a secondary or tangential content which would be considered seperate from but indirectly related to the main content .

  • Basic syntax
    
    
    < article class="article">
    < h1>Article head1< /h1>
    < section class="section">
    < h1>Section head< /h1>
    < /section>
    < /article>
    < article class="article">
    < h1>Article head2< /h1>
    < aside class="aside">
    aside
    < /aside>
    < /article>

  • Example :
    

    Article head1

    Section head

    Article head2

• Video and Audio

  • Audio element specifies a standard for embedding audio in a webpage .
  • video element specifies a standard for embedding video in a webpage .

  • Basic syntax
    
    
    < audio src="a.mp3" controls preload="" aria-controls="" mediagroup="">
    < label for="audio">Just Enjoy The Music .< /label>
    
    < /audio>
    < label for="video">Just Chill Out .< /label>
    < video src="v.mp4" controls poster="1.jpg" width="45%" height="25%">
    
    < /video>

  • Example :
    
    Just Enjoy The Music .
    
    
    
    Just Chill Out .
    
    

• Progress

  • Progress element provides the ability to create progress bars on the web .

  • Basic syntax
    
    
    < label for="progress">INTELLIGENCE OF PETTEM SRIKANTH < /label>
    < progress value="0" max="100">0%< /progress>

  • Example :
    
    INTELLIGENCE OF PETTEM SRIKANTH
    
    0%

• WebStorage

  • Websites can store data on a user's local computer .
  • Advantages :
    
    
    1. More secure
    2. Faster
    3. Stores a larger amount of data
    4. Stored data is not sent with every server request .
  • There are two types of wed storage objects :
    
    1. sessionStorage() :
       Expires when user closes the Brower .
    2. localStorage() :
       Not have any Expire date .
    
    

    Need a little bit Knowledge in javascript , To understand Webstorage .

  • Basic syntax
    
    
    < script type="text/javascript">
    var name=prompt("ENTER YOUR NAME ");
    localStorage.setItem("key1",name);
    alert("Mr."+localStorage.getItem("key1")+" This is localStorage . You we learn more about this in further depth . ");
    localStorage.removeItem("key1");
    localStorage.clear();
    
    sessionStorage.setItem("key2",name);
    alert("Mr. "+sessionStorage.getItem("key2")+" This is sessionStorage . Anyway let's dive the ocean of learning together !");
    sessionStorage.removeItem("key2");
    sessionStorage.clear();
    < /script>

  • Already you experenced the WebStorage i.e., localStorage & sessionStorage .
    To experience again just reload the page .

• Geolocation API

  • Geolocation API is used to obtain the User's geographical location .
  • This option is not available until the user approves it .As it invovels in privacy matter .
  • Geolocation is much more accurete for devices with GPS .
  • User location can be presented in two ways .
    
    1. Geodetic way
    2. Civic way

    Need a little bit Knowledge in javascript , To understand Webstorage .

  • Basic syntax
    
    
    < p>click the location button< /p>
    < button type="button" name="button" onclick="getLocation()" >GET LOCATION< /button>
    < p id="demo">< /p>
    < script type="text/javascript">
    var x=document.getElementById("demo");
    
    function getLocation(){
    if (navigator.geolocation){
    navigator.geolocation.getCurrentPosition(showPosition);
    }
    else{
    x.innerHTML="Geolocation is not supported in your Brower .";
    }
    }
    function showPosition(position){
    x.innerHTML="Latitude: "+position.coords.latitude+"
    Longitude: "+position.coords.longitude;
    }
    < /script>

  • Example :
    
    

    click the location button

    GET LOCATION

• Drag and Drop API

  • The drag&drop feature used to grab an object and drag it to a different location .
  • The drag and drop API is event based .
    

    Need a little bit Knowledge in javascript , To understand Webstorage .

  • Basic syntax
    
    
    < script type="text/javascript">
    function allowDrop(ev){
    ev.preventDefault();
    }
    function drag(ev){
    ev.dataTransfer.setData("text",ev.target.id);
    }
    function drop(ev){
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
    }
    < /script>
    
    < div id="box" ondrop="drop(event)" ondragover="allowDrop(event)" style="border:1px solid white;width:336;height:300;">
    
    < /div>
    < br>
    < img id="drag1" src="1.jpeg" alt="IMAGE" draggable="true" ondragstart="drag(event)">
    < img id="drag2" src="1.jpeg" alt="IMAGE" draggable="true" ondragstart="drag(event)">

  • Example :
    
    Drop Here :
    
    
    
    Drag elements here :
    
    

• SVG

  • SVG stands for scalable vector graphs .
  • SVG is used to draw shapes with HTML-style markup .
  • SVG is not pixel-based .
  • SVG defines vector based graphics in XML format

  • Basic syntax :
    
    
    < img src="image.svg" alt="SVG IMAGE" width="20px" height="10px">
    < label for="">CIRCLE< /label>< br>
    < svg width="300" height="300">
    < circle cx="50" cy="50" r="50" fill="skyblue">
    < /svg>
    < label for="">RECTANGLE< /label>< br>
    < svg width="300" height="300">
    < rect x="50" y="50" width="100" height="90" fill="skyblue">
    < /svg>
    < label for="">LINE< /label>< br>
    < svg width="300" height="300">
    < line x1="0" y1="0" x2="300" y2="300" style="stroke:skyblue;stroke-linecap:round;stroke-width:">
    < /svg>
    < label for="">ELLIPSE< /label>< br>
    < svg width="300" height="300">
    < ellipse cx="100" cy="100" rx="50" ry="70" fill="skyblue">
    < /svg>
    < label for="">POLYLINE< /label>< br>
    < svg width="300" height="300">
    < polyline style="stroke-linejoin:miter;stroke:black;stroke-width:12;fill:skyblue;" points="10 10 ,15 150,20 10,100 100">
    < /svg>
    < label for="">POLYGON< /label>< br>
    < svg width="300" height="300">
    < polygon points="10 100,200 20,30 300,40 0" style="fill:skyblue;stroke:black;">
    < /svg>

  • Example :
    
    CIRCLE
    RECTANGLE
    LINE
    ELLIPSE
    POLYLINE
    POLYGON
    

• SVG animation and paths

  • SVG animation can be created using the animate element .
  • Path element is used to define a path .
    
    1. M : moveto
    2. L : lineto
    3. H : horizontal lineto
    4. V : vertical lineto
    5. C : curveto
    6. S : smooth curveto
    7. Q : quadratic bezierto
    8. T : smooth quadratic bezierto
    9. A : elliptical arc
    10. Z : closepath

  • 
    
    

  • Example :
    
    ANIMATION
    PATH
    

• CANVAS

  • Canvas is used to draw graphics from simple lines to complex graphic objects .
  • Canvas must have an ID attribute so it can be refered by javascript .
  • Because , canvas is javascript dependent .
  • Canvas is pixel based .
  • Canvas element is only a container for graphics .
  • Canvas is a 2D grid .
    

    Need a little bit Knowledge in javascript , To understand Webstorage .

  • Basic syntax
    
    
    < canvas id="canvas1" width="400" height="400" style="border:1px solid white;">
    Your brower doesn't support the canvas tag .
    < /canvas>
    
    < script type="text/javascript">
    var c = document.getElementById('canvas1');
    var ctx = c.getContext("2d");
    ctx.fillStyle = "#fff";
    ctx.font = "10px monospace";
    ctx.fillText("Hello World",10,50);
    ctx.fillRect(20,20,10,10);
    ctx.fillRect(10,10,10,10);
    ctx.rotate((Math.PI/100)*25);
    ctx.fillText("after rotate",200,200);
    ctx.scale(1.5,4);
    ctx.fillText("after scale",150,150);
    < /script>

  • Example :
    
    Your brower doesn't support the canvas tag .