I pretty new on these things and im trying to improve my self on html skeleton. So when I call html skeleton on vscode it's being like this as you know.
<!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>
</body>
</html>
but i want to change default html skeleton content as like this;
<!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>
<style>
body{background-color: black;}
</style>
</head>
<body>
</body>
</html>
Someone can help me with this?
You can make your own custom snippet using vscode.
As in your case you can create one using the following steps:
Open the gear icon on the bottom left of you vscode.
Select user snippet
Type html
Adding your custom html skelton
You can now add this code to have your custom skelton:
"boilerplate": {
"prefix": "log",
body: [
"<!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>",
" <style>",
" body{background-color: black;}",
" </style>",
"</head>",
"<body>",
" ",
"</body>",
"</html>",
],
"description": ""
}
],
"description": "Log output to console"
}
}
I haven't changed the prefix, but it can be changed through "prefix": ""
Using the custom snippet
To use the custom snippet, just type the prefix in the html file to get the results!
If you want to add you own custom code, and have problem in converting it into snippet, here's a website which will help in that:
snippet generator
For more knowledge this video can help: YouTube video
Related
I'm working on a .NET and Angular webapp, with ngx-sharebuttons ShareButtonModule. When I want to get a link of the post or share it via WhatsApp, the meta tags are not being updated properly. I am setting up default meta tags in index.html:
index.html
<html lang="pl">
<head>
<meta charset="utf-8">
<title>DDM - Daily Dose Of Memes</title>
<base href="/">
<meta name="description" content="Memy na miarę Twoich możliwości. Ty też możesz dać z siebie 30%! Zbiór obrazków, gifów i filmików dla sympatyków czarnego humoru.">
<!-- <meta name="keywords" content="Memy, hard, obrazki, filmiki, czarny humor"> -->
<meta name="keywords" content>
<meta name="url" content="https://ddmemes.com.pl">
<meta name="title" content="DDM - Daily Dose Of Memes">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="shortcut icon" href="./assets/favicon.ico">
<!-- og meta tags for link share -->
<meta property="og:title" content="DDM - Daily Dose Of Memes"/>
<meta property="og:url" content="https://ddmemes.com.pl"/>
<meta property="og:image" content="https://res.cloudinary.com/duj1ftjtp/image/upload/v1659954431/LogoImage.png"/>
<meta property="og:description" content="Memy na miarę Twoich możliwości. Ty też możesz dać z siebie 30%! Zbiór obrazków, gifów i filmików dla sympatyków czarnego humoru.">
<link rel="manifest" href="manifest.webmanifest">
<meta name="theme-color" content="#000000">
</head>
<body>
<app-root></app-root>
<noscript>Please enable JavaScript to continue using this application.</noscript>
</body>
</html>
Later, when the user wants to share a post's component, it appears that the meta attributes are not being updated properly. First, I am setting the data via share-buttons modal:
meme-card.component.html
<share-buttons theme="modern-dark"
[include]="['copy', 'facebook', 'messenger', 'reddit', 'telegram', 'twitter', 'whatsapp']"
[showIcon]="true"
[showText]="true"
[autoSetMeta]="false"
image="{{meme?.url}}"
url="https://ddmemes.com.pl/meme/{{meme.id}}/{{convertText(meme.title)}}"
description="{{meme?.title}}"
title="{{meme?.title}}"
class="pt-3">
</share-buttons>
Also, I am updating the meta tags themselves in ngOnInit via below code:
meme-card.component.ts
changeMetaTags() {
this.meta?.updateTag(
{ property: 'og:title', content: this.meme?.title },
);
this.meta?.addTag(
{ name: 'title', content: this.meme?.title}
);
this.meta?.updateTag(
{ name: 'description', content: this.meme?.title },
);
this.meta?.updateTag(
{ property: 'og:image', content: this.meme?.url },
);
}
Although everything appears to be updated properly upon inspecting a page, when I send the link to somebody or upon checking in https://www.heymeta.com/, it appears that the data still remains default, equal to the one given in index.html. The only thing that seems to be updated is url.
Is there something I'm missing here? I'd appreciate any help.
Cheers
I would like to change the basic hmtl structure in VS code that is loaded with [! + tab] or [ctrl + space]
What I have when I press [! 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>
</body>
</html>
What I would like to set it to for example :
<!DOCTYPE html>
<html lang="fr">
<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">
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<title>Document</title>
</head>
<body>
</body>
</html>
I tried looking into the html snippets parameters but didn't find anything.
To overwrite existing emmets in VS Code:
Create a snippets.json file, add this JSON structure and save it somewhere on your hard disk.
{
"html": {
"snippets": {
"!": "{<!DOCTYPE html>}+html[lang='fr']>(head>meta:utf+meta:vp+title{${2:Document}}+link[rel='stylesheet' type='text/css' media='screen' href='main.css'])+body"
}
},
"css": {
"snippets": {}
}
}
Open the VS Code settings (Code → Preferences → Settings) and search for “Emmet Extensions Path”.
Click “Add Item”, enter the path to the folder where you’ve saved the snippets.json file you’ve created earlier, and press “OK”.
Now try ! + TAB ;)
To learn more about how custom snippets work, check this article
I have made a basic form page in HTML and programmed it such that when I click the submit button, it must go to a JSP page where the details entered will be displayed.
The HTML code is:
<!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>ABC</title>
</head>
<body>
<form method="post" action="xyz.jsp">
Name: <input type="text" name="nm" placeholder>
ID: <input type="text" name="id" placeholder>
Submit: <input type="submit">
</form>
</body>
</html>
The JSP code is:
<!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>XYZ</title>
</head>
<body>
<%
String St1 = request.getParameter("nm");
String St2 = request.getParameter("id");
out.println("Your name is: " + St1);
out.println("Your id is: " + St2);
%>
</body>
</html>
When I tried running the HTML page using the live server in vs code, it shows the page not found after clicking the submit button.
I am literally a beginner and helpless, please tell me what should I do? OR where am I getting it wrong?
I`m using VSCode for the aforementioned.
I have problem with formatting html file by prettier end eslint. Prettier formatting by html code by adding /> to single tag, but I don't want using slash character for end my tag. And second problem is adding indent for "head" and "body" tag in "html" tag, I want Use indent only in "body" and "head" tag.
Second problem is conflict with prettier and eslint in my JS code. ESlint return problem because I seting indent for 4 spaces, but prettier want using only two spaces intent.
Prettier return code like this
<!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>Document</title>
</head>
<body></body>
</html>
But I want have something like this
<!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>Document</title>
</head>
<body>
</body>
</html>
My pacpage.json prettier and eslint dependencies
"eslint": "^6.1.0",
"eslint-config-airbnb": "^18.0.1",
"eslint-config-prettier": "^6.2.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.1.0",
"eslint-plugin-react": "^7.14.3",
"eslint-plugin-react-hooks": "^1.7.0",
"prettier": "^1.18.2",
.eslintrc.json
{
"extends": ["airbnb", "prettier"],
"plugins": ["prettier"],
"rules": {
"prettier/prettier": ["error"],
"indent": [
"error",
4,
{ "VariableDeclarator": { "var": 2, "let": 2, "const": 3 } }
]
}
}
.prettierrc
{
"singleQuote": true,
}
Thanks for your help.
I am working on a simple webpage. I have a following sample json file and an HTML template
data.json
{
"NAME":"SAMPLE_NAME",
"ADDRESS":"New Brunswick Avenue"
}
index.html
<div class="name"></div>
<div class="address"></div>
So i have to display the name and address on the template reading from the json file. Is there any library that i can user for this or any other way to accomplish this?
I think you are looking for a compile-time templating or pre-compiled templating engine sort of thing.
You can build one your own with html, css and using javascript or jquery to change the text of certain elements, but this is going to take a long time if you have big pages.
However there is a library out there that does something like this and its called Handlebars.
Heres a link: http://berzniz.com/post/24743062344/handling-handlebarsjs-like-a-pro
This might give you an idea of what it does: What is the difference between handlebar.js and handlebar.runtime.js?
Here is an example using your html:
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js"></script>
<!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>Document</title>
</head>
<body>
<script>
// Load your html / template into this variable
var template = '<div class="name">{{name}}</div><div class="address">{{address}}</div>';
var jsonData = {
"name":"John",
"address": "City Street"
}
var compiledTemplate = Handlebars.compile(template);
// The output html is generated using
var html = compiledTemplate(jsonData);
document.getElementsByTagName('body')[0].innerHTML = html;
</script>
</body>
</html>
If you would rather write html outside of the javascript variables you could also do it like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js"></script>
<!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>Document</title>
</head>
<body>
<div id="template">
<div class="name">{{name}}</div>
<div class="address">{{address}}</div>
</div>
<script>
// Load your html / template into this variable
var template = document.getElementById('template').innerHTML;
var jsonData = {
"name":"John",
"address": "City Street"
}
var compiledTemplate = Handlebars.compile(template);
// The output html is generated using
var html = compiledTemplate(jsonData);
document.getElementById('template').innerHTML = html;
</script>
</body>
</html>