Send HTML Email that contains stylesheet - html

I send an email but Gmail don't read my html head.
I need to use from #font-face.
I send this HTML:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Title</title>
<link href="http://myAddress.com/style.css" rel="stylesheet" />
</head>
<body>
<h1 class="style1">Hello</h1>
</body>
</html>
I want to see this:
image is here
but i see this:
image is here

Gmail's CSS support is very... limited to say: The Ultimate Guide to CSS. So you are probably out of luck here and need to rewrite the code.
Also see Understanding Gmail and CSS: Part 1 for more details on how to solve this. You need to inline all your CSS, but there are tools available.

Related

Quotation marks inside <pre> element showing as “ or similar character

I'm just trying to post a simple html file consisting mainly of some prose I wrote inside of <pre> elements.
Interestingly, when I view the file on my computer with my browser, the quotation marks display fine. But when I upload it to my website, quotation marks are rendered as something like “ or â€. I have looked around the web for solutions but they were few and in between.
I tried to use the meta tag and included
<meta http-equiv="Content-Type" content="text/html; charset="utf-8" />
to my header but to no avail. Any ideas on how to solve this? It just wouldn't make sense to go back to the content inside the elements and code it into html as the prose is a draft and will go through many changes in the future.
The <!doctype html> tag indicates the file is HTML5 - so the browser will render it as such. lang="en" should be set to the language you are working with. Be sure to use the <meta charset="utf-8"> tag to set the character set in the <head>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Template</title>
</head>
<body>
<pre>This is my stuff</pre>
</body>
</html>
Check your code with the browser's View Source and use the Validator at https://validator.w3.org/ to check the page.
Here what I tried.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<pre>Einstein said,"Once you stop learning, you start dying"</pre>
</body>
</html>
I also tried only this
<body>
<pre>Einstein said,"Once you stop learning, you start dying"</pre>
</body>
Still working

Where should i add css in html file?

I was trying to add css in my blogger's blog but for some reason blogger theme designer is not working so i decided to add css directly in the code using tags, but I can't find the tag in the html file. It is my first time when I am unable to understand where is. Anyone know where tag is in this file to add css?
I did not Code it completely! And the person who did is no longer in contact with me!
Click Here to see Code
To use an external style sheet, add a link to it in the section of the HTML page:
<head>
<link rel="stylesheet" href="styles.css">
</head>
Search for this ]]></b:skin> and place your CSS code before it without using <style>
Or if you want to use a style tag, place it after </b:skin>
The <style> element is used to add CSS style rules to an HTML document. The element is expected to appear in the document <head>, but will also render acceptably when used in the <body> of the document.
Your program should look like this
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
you should add the head tag yourself to the top of the document if you do not have one already. for the href change that to the name of your css file.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML amp='amp' lang='en'>
<head>
<meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1, minimum-scale=1' name='viewport'/>
<!--[if ie]><meta content='IE=9; IE=8; IE=7; IE=EDGE; chrome=1' http-equiv='X-UA-Compatible'/> <![endif]-->
<meta content='blogger' name='generator'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<link href='https://justpaste.it/redirect/3qnyk/http://www.blogger.com/openid-server.g' rel='nofollow'/>
<link expr:href='' rel='nofollow'/>
<link expr:href='' rel='nofollow'/>
</head>

how do i add an image in the background in css from a folder?

I have an image, and from what I've seen in W3schools you can just use
body background = farm.jpg
And that works, but it says and I've seen people say this, that it can work with css with
background-image: url(farm.jpg) (with and without quotes)
yet whenever i try it can't find the picture.Do I need to put it in a separate folder?
It depenteds to where is your css file , put your css file and image file into same place, and try below
background-image: url("frame.jpg");
Or you can use / to start from root folder.
background-image: url("/frame.jpg");
Read this.
(1) https://www.w3schools.com/tags/att_body_background.asp
Unfourtunately the background attribute is not supported in HTML5. You must use CSS instead.
(2) You can use the code example form this page, what works:
https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Hintergrundfarben_und_-bilder/background-image
For example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Your page</title>
<meta name="description" content="The HTML5 page">
<meta name="author" content="Your Name">
<link rel="stylesheet" href="css/styles.css?v=1.0">
<style>
body {
background-image: url("background.png");
}
</style>
</head>
<body>
<p>Test.</p>
</body>
</html>
Hope this helps.

location of DIV tag in DOM

I was validating my moodle website with the w3c validation service. in it, there is this code that caused a lot of problems:
<!DOCTYPE html>
<html dir="ltr" lang="en" xml:lang="en" class="yui3-js-enabled">
<div id="yui3-css-stamp" style="position: absolute !important; visibility: hidden !important" class=""></div>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Course: Program 1 :title</title>
<meta name="keywords" content="moodle, xxxxxxxxx">
<script async="" src="./test_files/analytics.js"></script><script type="text/javascript">
my question is, can a div tag be inside a tag, but not in a body??
No it can not - it is not proper HTML,
of course it will still work in almost any browser , as most modern browsers are very lenient with improper HTML
It looks like you have it positioned absolutely, maybe I'm assuming because you want it way up on top above anything else. Don't worry - you can still accomplish this behavior inside the <body> tag
While HTML is a flexible and browsers are forgiving, HTML does specify a basic structure. Content in the header contains meta data about the page, as well as resources like CSS the browser should get. The part of the document tree used by the browser to paint the web page should be based on content in the body tag.
Here is a revised sample of your markup to show one way to improve it.
<!DOCTYPE html>
<html dir="ltr" lang="en" xml:lang="en" class="yui3-js-enabled">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Course: Program 1 :title</title>
<meta name="keywords" content="moodle, xxxxxxxxx">
<script async="" src="./test_files/analytics.js"></script>
<script type="text/javascript"></script>
</head>
<body>
<div id="yui3-css-stamp" style="position: absolute !important; visibility: hidden !important" class=""></div>
</body>
</html>
Answer is No its improper way of doing it The page may or may not break depending on browser
No, div tag must be inside body tag.

Using Komodo Edit, and trying to link HTML/CSS Files

I'm completely new at HTML/CSS.
I'm currently using a Mac and I don't know how to link HTML/CSS files in Komodo. Oddly enough, I cannot find anything online that explains how. Is there any one who can explain in DETAIL how to go about doing so?
You link a CSS file with a <link> tag in the <head> of your HTML file:
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
You can find more information from the HTML Dog: Applying CSS article.