Manav Goyal

Introduction - H T M L

Topic

  • Basic
    • <!-- --> => Multi-line Comment
    • // => Single-line Comment
    • !DOCTYPE html => Declaration for HTML5
    • <html lang = en/en-US> => Declare language to help browser
    • <base src = url> => Specifies the base URL and/or target for all relative URLs in a page
    • <base target = "">
    • <body>
    • <tag id = ""> => Can not have more than one element with the same id
    • <tag class = "">
  • Head
    • <head> => Contains Metadata (data about data)
    • <title> => Defines the title of the document
    • <meta charset = UTF-8> => Define the character set used
    • <meta name = viewport> => Define keywords for search engines/description of your web page/author of a page
    • <meta content = HTML, CSS, JavaScript/30/width=device-width, initial-scale=1.0/abc>
    • <meta http-equiv = refresh> => Refresh document every "x" second if content = x
    • <meta name = "color-scheme" content = "dark light" => Can write here instead of CSS
  • CSS
    • <style> => For internal CSS, Used inside head
    • <link rel = stylesheet>
    • <link href = fileName.css>
    • <link media = print/all/screen/speech/screen and (min-width:500px)/screen and (max-height:700px) >
    • <link type = text/css>
  • JavaScript
    • <script> => For internal JS, Used at the end of body, Caches the file if not changed
    • <script src = fileName.js>
    • <script src = fileName.js defer> => External JS file loads after HTML and CSS
    • <noscript> => Display content if js is not supported
  • Entities, Symbols, Emoji
    • <&lt;> => <
    • <&gt;> => >
    • <&nbsp;> => space
    • <&amp;> => &
    • <&copy;> => ©
    • <&reg;> => ®
    • <&#65;> => A
    • <&#128512;> => 😀

Others

  • Theory
    • <Tag Attribute = "Value"> Content </Tag> => Element
      • Empty element => Does not have closing tag => <tag attribute=" " />
      • Not case sensitive, Value can be under Double quote/Single quote/No quote
      • Block level & Inline level
      • Semantic & Generic
    • Page Layout
      • Header => Navigation
      • Main => Section, Article, Aside
      • Footer
    • SEO => On Page, Off Page
      • Nice and To the point Title
      • Set Meta description
      • Set a nice URL Slug
      • Set a Favicon
      • Compress Image & Resources
    • MultiMedia
      • .mpg/.mpeg/.avi/.wmv/.mov/.rm/.ram/.swf/.flv/.ogg/.webm/.mp4
    • Object => Defines a container for an external resource
      • <object data="video.mp4" width="400" height="300"></object>
  • VS Code Tricks
    • ! => Gives basic Boiler plate
    • loremN => Writes "N" words
  • DOM Events
    • onclick = "functionName()" => When element is clicked by LMB
    • onmouseenter = "functionName()" => When element is clicked by LMB
Share: