Scribd
Upload
6 views2 pages

HTML Notes

The document outlines key features and functionalities of Visual Studio Code for web development, including support for various programming languages and HTML elements. It covers essential HTML tags, responsive design principles, and shortcuts for efficient coding. Additionally, it explains inline and block-level elements, formatting, and attributes for HTML elements like images and input fields.

Uploaded by

mcrcyberark
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
6 views2 pages

HTML Notes

The document outlines key features and functionalities of Visual Studio Code for web development, including support for various programming languages and HTML elements. It covers essential HTML tags, responsive design principles, and shortcuts for efficient coding. Additionally, it explains inline and block-level elements, formatting, and attributes for HTML elements like images and input fields.

Uploaded by

mcrcyberark
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as RTF, PDF, TXT or read online on Scribd

ClASS-1

 VISUAL STUDIO CODE WILL SUPPORT JAVASCRIPT, TYPESCRIPT, PYTHON, PHP, AZURE

 FOLDER CREATION-HTML FILE CREATION

 “DOCTYPE” IT WILL INSTRUCT THE BROWSER WHICH TYPE OF VERSION WE ARE


USING.

 INSPECT

 LIVE SERVER

 DIV TAG (IF GIVE LOT OF SPACES ALSO IT WILL CONVERT INTO ONE SPACE)

<div>Karthik

Reddy</div>

 IF YOU WANT TO ADD MORE “SPACE” YOU CAN USE THIS CODE(&NBSP)

 YOU SHOULD WRITE SOME TAGS ONLY IN HEAD TAG.

 EMMET ABBREVATION (FIRST SAVE HTML FILE THEN PRESS SHIFT+! IT WILL DISPLAY
HTML STRUCTURE)

 <TITLE> TAG

 RESPONSIVE WEB DESIGN

 HTML COMMENT SHORTCUT(CTRL+/)

 META (NAME=” VIEWPORT”).

 TO ACHIEVE RESPONSIVE WEB DESIGN FIRST STEP IS “<META NAME=” VIEWPORT”


CONTENT=” WIDTH=DEVICE-WIDTH, INTIAL-SCALE=1.0”>

 FAV ICON
<LINK REL="ICON" TYPE="IMAGE/PNG" HREF="[Link]"/>

 FAV ICON GENERATOR (SEARCH IN GOOGLE)

CLASS-2
 INLINE AND BLOCK LEVEL ELEMENTS

 INSPECT MODE EXPLAIN

 USER AGENT STYLES EXPLAIN

 HEADING TAGS (EXPLAIN IN REALTIME WEBSITE)

 H$*6{Karthik}-SHORTCUT IT WILL DISPLAY AS PER TABLE

<h1>Karthik</h1>

<h2>Karthik</h2>

<h3>Karthik</h3>

<h4>Karthik</h4>

<h5>Karthik</h5>

<h6>Karthik</h6>

 PARAGRAPH TAG (REAL TIME EXPLAIN IN WEBSITE), SHORT CUT FOR LARGE PARAGRAPH
<p>Lorem</p>THEN ENTER

 “FORMATING DOCUMENT” IN VISUAL STUDIO CODE

 “FORMATING ELEMENTS” IN HTML

 ANHOR TAG, SPAN TAG, DIV TAG, BUTTON TAG

 TARGET=” BLANK”, WIDTH, HEIGHT ATTRIBUTE

 <img></img> - it will work but not correct. <img /> - it will correct.

 Self-closing tag

 INPUT TAG (WHETHER IF YOU WON’T GIVE TYPE=”TEXT” IT WILL BEHAVE DEFAULT TEXT)

 PLACEHOLDER ATTRIBUTE

 TYPE=” NUMBER”,”TEXT”,” PASSWORD”,” COLOR”,” DATE”,” BUTTON”.

 “ALT” ATTRIBUTE -ALTERNET TEXT, FOR EXAMPLE IF IT’S NOT DISPLAYING IMAGE THAT TIME IT
WILL DISPLAY ALTERNATE TEXT.

You might also like