Dt. 25-01-23
Today we have to do our first program on VS Code. First of all, we need one of these platforms like- Windows, Linux and Mac os. VS Code is a cross-platform IDE (integrated development environment). Installation is the same for all platforms. All we need to do is go to this website - VS Code. Install it. Yes, Yes and Finish. Double-click and run the program. The last step is to Install an extension from the Left last option "Extension". The extension is - ''Live Server''.
- Now create a folder and drag it into the vs code and drop it. Click "File'' and select ''new file'' option
2. Ctrl+S for save - file_name.html
3. Now we have to write Boiler Plate code - The first few lines are the same for all types of code. So write the Boiler Plate Code type ''!'' and hit Tab.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
copy the code and paste it into VS code editor. save and run with Live Server.
Emmet
Emmet is a plugin for text editors that allows writing HTML & CSS faster by using abbreviations that expand the full code.
So when we type only "!" this is an emmet abbreviation. We talk about more emmet letter.
Comments, Tags, Elements and Attributes
Tag
In HTML tags are used to define the structure and layout of a webpage. They are basic building blocks that are used to create elements on a page.
<tag> content </tag>
Comments
HTML comments are a way to add notes and explanations to your HTML code without them being visible to users when the page is rendered in a web browser.
<!-- ctrl+/ to apply comments html windows -->
<!-- comments -->
Elements
Elements are individual components of an HTML document such as headings, paragraphs, and images.
<!-- Headings -->
<h1>CONTENT</h1>
<P>CONTENT</P>
Attributes
Attributes are used to provide additional information about an element. They come with an opening tag of elements in the form of name-value pair.
<img src="tanmay.jpg" alt="tinam">
!DOCTYPE - Document type
<html> all code is present inside the HTML tag.</head>
The
<head>element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag.The
<title>tag defines the title of the document. The title must be text-only, and it is shown in the browser's title bar or in the page's tab.The
<body>tag defines the document's body.The
<body>element contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.html - html file
both are used for HTML 5
lang = "en'' -- language is English
<meta> - data about data
UTF-8 (Unicode Transformation Format) -8<h1>
<!-- headings --> <h1> <h2> <h3> <h4> <h5> <h6></h6> </h5> </h4> </h3> </h2> </h1> <!-- paragraph --> <p> </p>\*The detailed explanation we are studying in the future.*