Posts

HTML Form with input tags, table tag, video tag, audio tag, video tag, google map tag, youtube video tag

Image
<! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0, shrink-to-fit=no" >     < meta http-equiv = "X-UA-Compatible" content = "ie=edge" >     < title > HTML Form Practice </ title > </ head > < body >     < form action = "" method = "" align = "center" >         < h1 > HTML Form </ h1 >         < label for = "name" > Name : </ label >         < input type = "text" name = "name" id = "name" size = "30px" placeholder = "Enter name" />< br >< br >         < label for = "emailId" > Email : </ label >         < input type = "email" name = "email" id = "emailId"...

Semantic Tags in HTML

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width" >     < meta http-equiv = "X-UA-Compatible" content = "ie=edge" >     < title > Semantic Tags in HTML </ title > </ head > < body >     < h3 > Semantic Elements </ h3 >     < details >         < summary > I have no keys but no doors. I have space but no room. You can enter but can't leave. What am I?         </ summary >         Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus dolor quaerat suscipit non omnis dignissimos         repellat ratione iure ut cupiditate, sunt illo et voluptatem recusandae doloribus! Praesentium qui id omnis.     </ details > </ body > </ html ...

Inline and Block Elements in HTML

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < meta http-equiv = "X-UA-Compatible" content = "ie=edge" >     < title > Inline and Bloc Elements </ title > </ head > < body > </ body > <!--Below paragraph tag is Block Element because it occupies whole line space as shown below--> <!--Below strong tag, anchor tag, span tag are Inline Element because it occupies only required space as shown below--> < p style = " border: 2px solid red;" > This is a paragraph </ p > < strong style = " border: 2px solid brown;" > This is a strong paragraph </ strong > < a style = " border: 2px solid blue;" > This is a anchor paragraph </ a > < p style = " border: 2px so...

Img and Anchor tag in HTML

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < meta http-equiv = "X-UA-Compatible" content = "ie=edge" >     < title > Img and Anchor Tag </ title > </ head > < body >     < a href = "https://www.facebook.com" target = "_blank" > Go to Facebook </ a >< br >< br >     < a href = "https://www.youtube.com" target = "_blank" > Go to Youtube </ a >< br >< br >     < a href = "https://www.google.com" target = "_blank" > Go to Google </ a >< br >< br >     < img src = "harry.jpg" alt = "Error loading image" >< br >< br >     < img src = "image1.png" alt = ...

Ids and Classes in HTML

Image
  <! DOCTYPE html > < html > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < meta http-equiv = "X-UA-Compatible" content = "ie=edge" >     < title > Ids and Classes in HTML </ title > </ head > < body >     < h3 > Ids and Classes tutorial </ h3 >     < div id = "mainBox" class = "redBg blackBorder" >         this is mainbox     </ div >     < span class = "redBg" ></ span >     <!-- Emmet -->     <!-- . is for class and # is for id -->     < span class = "redBg" ></ span >     < span id = "mainSpan" ></ span >     < div class = "redBg blackBorder anotherClass" ></ div >     <!-- Emmet takes ...

HTML Entities

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < meta http-equiv = "X-UA-Compatible" content = "ie=edge" >     < title > HTML Entities </ title > </ head > < body >     < div class = "container" >         < p > This is a paragraph </ p >     </ div >     < div class = "container" >         < p > This is another &nbsp; &nbsp; paragraph with two spaces </ p >         < p > Paragraph is written like this &lt; p &gt; </ p >         < p > Pound is written like this &pound; </ p >         < p > Copyright is written like this &copy; </ p ...

Headings and Paragraphs in HTML

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < meta http-equiv = "X-UA-Compatible" content = "ie=edge" >     < title > Headings and Paragraphs </ title > </ head > < body >     < h1 > Harry </ h1 >     < h2 > Harry </ h2 >     < h3 > Harry </ h3 >     < h4 > Harry </ h4 >     < h5 > Harry </ h5 >     < h6 > Harry </ h6 >     < p > This is Harry </ p >     < p > This is new Paragraphs </ p >     < p > Lorem ipsum dolor sit amet consectetur < strong > This is Strong </ strong > adipisicing elit. Harum suscipit a sed         magni excepturi...