I have been having problems with href links. It doesn't matter how I type the URL it always links relative to my website and so doesn't work. Same happens with mailto: links. So, in an attempt to figure it out I wrote the most basic web page imaginable....and it still doesn't work! I have tried every variant of the URL (with and without 'www', with and without 'http') and nothing works. I have code checked using the w3 validator and it has passed. Any ideas what is going wrong?
I am using text editor on a Mac where I've always used notepad on a PC.
<!DOCTYPE html>
<html>
<head><title>Energise My Life</title>
<meta charset="UTF-8">
</head>
<body>
<a href=“http://www.energisemylife.uk/”>website</a>
</body>
</html>
Ok, Jorden1337 is right about using the mailto, if you are trying to send a mail link. But I would try to use 'normal' quotation marks like ones you would get from a text editor like Atom rather than the ones in your sample code that appear to be Word Processor style quotes.
" instead of “
So your line of code should be:
website
Related
I'm using Atom for small HTML/JS projects, and something odd keeps happening. My html file will lose the color coded syntax so all the text is black/grey. I've noticed this mostly happens when I try to add script tags at the bottom, or when I copy/paste in bootstrap links at the top.
Sometimes it will leave individual lines of code with the correct coloring, which I find even stranger. Like the whole file will be in black/white but the final tag is still red.
I've tried to troubleshoot by changing the language at the bottom, which does nothing. I've also tried creating new files, copying/pasting the code instead of typing it. All the questions/answers I've found on Stackoverflow have been regarding custom syntax coloring, not what to do if your file loses its color.
Examples: if I use the most basic html template by typing 'html' and letting it autofill. All the text will be in the correct coloring. But then if I autofill "src" or "scr", or manually type it will turn either portions of the font or the entire font black. Often if I close and re-open the file, or copy/paste identical text in, it will fix the problem.
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src="app.js" charset="utf-8"></script>
</body>
</html>
as you said final tag still is red , and it shows colors on some lines there might be a problem with quotes,
incomplete quotes or brackets usually creates such problems.
I was wondering if it was possible to create a mailto like link which people can click and it will open their default mailing app with the inputed subject line, to field and email body.
I want to use this to put in my Instagram bio so that people can click on that link and have an email ready to send.
I'm a complete noob so initially I tried copy pasting a whole mailto line into the Instagram bio because copy pasting it into a browser seemed to work, but Instagram doesn't allow that and changes the link to just be Gmail.com.
Thanks for the help.
There is a website called https://mailxto.com that you help you achieve exactly what you are looking for.
It lets you a mailto: code into a clickable link by shorting it. you should checkout.
You can use the mailto protocol which allows opening a client's e-mail system and begins a new email message.
mailto:sAddress[sHeaders]
where
sAddress - One or more valid e-mail addresses separated by a semicolon. You must use Internet-safe characters, such as "%20" for the space character.
sHeaders - One or more name-value pairs. The first pair should be prefixed by a "?" and any additional pairs should be prefixed by a "&". The name can be one of the following strings.
subject - Text to appear in the subject line of the message.
body - Text to appear in the body of the message.
CC - Addresses to be included in the "cc" (carbon copy) section of the message.
BCC - Addresses to be included in the "bcc" (blind carbon copy) section of the message.
Windows Internet Explorer 7 and later. You must percent-encode all URL-reserved characters within a mailto: address. For example, the number sign (#) is used as a fragment identifier in URLs. When processing an address such as some#one#example.com, Internet Explorer copies only the portion up to the number sign into the mail client; the fragment portion including the number sign is ignored. This behavior is by design.
For more information on the mailto protocol, see RFC2368: The mailto URL scheme.
This solution is very complex, but it will definitely work.
First, sign up to GitHub if you haven't already. Create a new repository and name it whatever you want. Then add a new file called index.html and paste this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="refresh" content="0; url=mailto:me#example.com?subject=Contact%20me">
<title>Redirecting to email...</title>
</head>
<body>
If you don't get redirected in 12 seconds automatically, you should
<a href="mailto:me#example.com?subject=Contact%20me">click this link</a
>.
</body>
</html>
Now set up GitHub pages. Click settings and go to github pages. Then select from master branch. Your domain should be [username].github.io/[repo name].
Set this domain in your Instagram bio or shorten it with Bitly first.
I am looking for the shortcut keys that I should use to autocomplete the structure of the HTML.
So for instance, when I type html and press a few keys the following structure should appear:
<!DOCTYPE html>
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
Note: I am using a MAC
"!" After typing, press the "TAB" key on the keyboard.
Perhaps you should look into templates for your IDE, for example in Sublime Text you have snippets which I would recommend looking into.
However, there is another workflow that you are able to use using a toolkit such as Emmet. The feature that you specifically want in Emmet is called "Expand Abbreviation". Essentially, you type out "CSS like" strings, put your caret at the end of the string and hit tab and Emmet will parse it into HTML. For example, the following string:
!doctype>html>(head>title)+(body)
will compile to the above (with a trailing closing tag of </!doctype> which is a bit awkward. However Emmet is quite clever and we can go one step further.. so expanding:
html:5
Will actually give you
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
Which is pretty much what you were looking for! And if you want to take it another step further, Emmet also supports expanding ! which is an alias for html:5. Only one character.
Check out Emmet's cheat sheet for more little bits.
In TextMate these are called snippets and they can easily be assigned a tab completion shortcut;
Select Bundles » Edit Bundles… in the TextMate 2 menu.
Select the bundle you want to add a snippet to, e.g. HTML. Press Cmd-N to create a new bundle item, and select Snippet.
Select Menu Actions
Press Command + N to create a new item, select snippet.
In the text area copy and paste your template.
On the drawer there's a field for "Tab Trigger", enter "html" there.
Save.
Now when you type "html" and press tab, your snippet will be inserted.
More info about creating a snippet.
Note: I've added "$0" in between your body tags. This is a tab stop and your cursor would appear at the $0. You can read more about advanced Snippet features here.
In My Humble Opinion;
html doesn't tab complete already because there's no good way to anticipate what you would want in your html template.
Sure, Emmet (as #bitten suggests in his answer) gives you something, but html:5 does too much; HTML5 does not mandate a html, head, or body tag. See this Stack post about HTML5's optional tags. Please see bitten's comment for some warranted concerns with this approach.
That said, I do use Emmet and it is worth investigating.
As for just inserting the doctype for HTML5 in TextMate, just type doctype and Tab.
click ! and after tab and you'll get the structure.
I created a Mailchimp template for the email newsletter of the company I work for. There's an issue with some links and I can't work out how to fix them.
I add a link into the email like so:
Contact Us
And the link appears fine, but when clicked within Gmail it takes you to the site's 404 page, even though the URL is (on the surface) correct.
After clicking the link, the URL displayed in the address bar is http://www.nameofcompany.com/contact-us.php, which is the correct URL and which when typed into the address bar directly goes to the correct page. But when I visit this URL from the email, then copy and paste it from the address bar into a new email in Gmail, I see: http://www.nameofcompany.com/contact%E2%80%90us.php
So this appears to be an issue with character encoding. I have no idea how to fix it though.
Here's the doctype, charset etc from the HTML of the email.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
The strangest thing is, most URLs in the email work perfectly fine, even those with dashes in.
What's causing this issue and how can I fix it?
Cheers
Okay, fixed it. I found the template on Mailchimp and used "Edit this template's code" to edit the HTML within my browser. Then I found the tag that was causing the trouble, deleted it and typed it back out again. Bit of a crude fix and I'm not sure why the problem originally arose but it's done the job!
E2 80 90 is the Unicode byte sequence for the multibyte hyphen character and you should be using the ASCII one.
Which app. do you use for coding your html files? This has to do with the encoding of the hyphen. Try using a simple text font if you are given such option at your code editor (such as Courier).
I don't know why hyphen was encoded into 3 bytes here - usually non alpha/num characters in URL are encoded into one byte.
Try replacing hyphen with %2D, so that hyphen won't be transformed into %E2%80%90.
I've been editing a lot of HTML pages with basic text editor, notepad.
When I went to validate them the validation service is saying there's a div tag that is not closed. I tend to find automatic error reports such as these don't tend to be too reliable, i.e they will give you a line number and the error but often times the error is actually in another part of the file entirely.
I'm just wondering if there is a way to find the closing tag for an opened HTML tag. For example, you click on a tag then click a shortcut, and the program will jump to the closing tag. I know this functionality is in homesite, but I don't have homesite, and its a bit of a bulky program anyway.
To sum up, I would like to know how to find html tags that don't have closing tags.
If you save your HTML as page.xhtml (instead of page.html), the browser (Firefox/Chrome or Opera) should find the un-closed tags for you without the need for a validator. Just remember to rename them .html before serving them online - IE doesn't support .xhtml files yet.
Edit (3 years later): This post's still getting comments/upvotes so a slight amendment. IE9 and IE10 do now support xhtml files.
Use the firefox view source - wrong code will be in different color
Notepad++ - never had any problems with it and also never had any unclosed html tag with it.
You can just click on any element and see if it has a closing tag. Also you can do this: click on "TextFX"(left from plugins in navigation) -> click on "Text FX HTML Tidy" -> click on lets say hmm "TiDy clean Document - wrap". That should fix your html document, aka close all unclosed elements.
http://validator.w3.org/
Does more than just unclosed tags. Should be used by all front-end developers, IMO.
I am using two online-tool, which work very fine.
jona.ca and tormus.com
CSE HTML Validator Lite is a free lightweight editor (for Windows) that will check your HTML (just press F6) and find missing end tags and other problems. You can also press Ctrl+M on a start tag or end tag and it will take you to the matching start or end tag.
A simple online service that will also do this (and more) is OnlineWebCheck.com. There are other online services but in my opinion the one I just mentioned is the simplest one to use and understand.
Full disclosure: I am the developer of CSE HTML Validator Lite and http://www.OnlineWebCheck.com/ which is based on CSE HTML Validator.
If your code is very messy, not prettified nor indented, v.Nu (as seen at https://validator.w3.org/nu/) will often get confused (for instance if there's an extre closing tag, it may not manage to select the one which is really wrong).
One solution is code folding: by collapsing all the code which is marked as a child of a certain node, you can often easily spot some incorrect hierarchy.
An example of editor which supports code folding is Kate editor: see the arrows on the left in their screenshot.
free lightweight html editors ... online html validation services that can highlight unclosed tags?
Use linter-vnu.
linter-vnu is a package for the Atom editor that uses the Nu Html Checker (v.Nu) to validate HTML or XHTML documents.
Disclosure: I am the developer of linter-vnu.
linter-vnu uses another Atom package, linter, to integrate v.Nu and Atom.
For example, if you open the following test.html file in Atom:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta charset="utf-8"/>
<title>Test HTML document</title>
</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet...</p>
</body>
</html>
(with a deliberately missing closing </div> tag)
then Atom (or rather, linter-vnu, thanks to linter and v.Nu) displays the following error messages:
Unclosed element “div”. at line 8 col 1 in test.html
End tag for “body” seen, but there were unclosed elements. at line 10 col 1 in test.html
and marks those lines in the editor with red dots.
If you click the "at..." (hyperlinked text) in the error message, the editor insertion point moves to the corresponding line, and a popup appears under the line, with the error text ('Unclosed element "div".').
If you save your HTML document with the file extension .xhtml, and open it in Atom, then v.Nu validates your document as XHTML (XML) rather than HTML, with slightly different messages. In this case, just one error message:
required character (found “b”) (expected “d”) at line 10 col 3
where line 10 contains the closing </body> tag. v.Nu was expecting a </div> tag instead; it was happy with </ - it was expecting a closing tag - but it was expecting the element name to begin with "d" for "div", not "b" for "body".
I make the following claims, as of November 2016:
v.Nu is the best option for validating (X)HTML(5).
linter-vnu is the best option for interactively harnessing v.Nu in an editor. linter-vnu itself is trivial; it's just a few lines of "glue" code. What makes it the best option is the Atom editor and the Atom linter package.
I welcome counterclaims and questions about these claims. I'd be happy to be proven wrong and be shown something better. Especially if, like v.Nu and linter-vnu, it's free.