I want to open a link in the same tab with html when clicking a word. Nevertheless, even if I've tried it using target="_self" and not using any target, it only works with target="_blank", but, as you may know, this opens the link in another tab.
Code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body
{
min-width:360px;
}
a{
color:#009900;
text-decoration:none;
}
a:hover
{
text-decoration:underline;
}
p
{
font:0.8em sans-serif;
}
h1
{
font:1.5em sans-serif;
color:#fff;
background:#006600;
padding:5px
}
</style>
</head>
<body>
<h1>play</h1>
<p>YT player</p>
</body>
</html>
<a target="_self" href="https://www.youtube.com" >YT player</a>
Use _self
<a target="_self" href="https://www.youtube.com" >YT player</a>
I'm sure you might have figured it out by now (over a year later), but your code:
<a target="_self" href="https://www.youtube.com" >YT player</a>
is written a bit strange. Try:
YT player
This works for me:
<p>YT-Player</p>
Related
I am using Thunderbird as my primary work mail client. I have just created a new HTML signature, which shows correctly in the Thunderbird, in Opera and in an online HTML Viewer but not on GMail. I would be very grateful if anyone could point me in the direction of what the problem is about. I have attached the .html signature file.
EDIT: I realized that I didn't specify the problem: when I inspect the elements in Opera on the GMail web inbox I see that the whole text is formated to Arial, 12.8 px while losing the different color on the first line (class = .name).
My CSS is very rusty so I suspect the error is on my side...
EDIT 2: code below as corrected by Tim Gerhard (thanks a lot!)
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style type="text/css">
.normal{font-family:"Arial"; font-size:9pt; line-height:1.25; color:#606060; font-weight:400}
.name{font-size:10.5pt; color:rgb(119,187,65); font-weight:700;}
.link{color:rgb(17,85,204)}
</style>
</head>
<body>
<div class="normal">
<span class="name">Rostislav Janda</span></br>
Obchodní zástupce</br></br>
<a style="link"; href="tel:+420%20721%20604%20707" value="+420721604707" target="_blank">+420 721 604 707</br>
<a style="link"; href="http://www.iqbudovy.cz"> www.iqbudovy.cz</a>
</br></br>
IQ Budovy s.r.o.</br>
<a style="link"; href="[map link]">Mečířova 5, 612 00 Brno</a></br></br>
<img alt="IQ_Logo" src="[image address]">
<br><br><br>
</div>
</body>
</html>
Edit:
You can use inline stylings to style your E-Mail as classnames aren't fully supported (as far as I', concerned). Use style="color:red" instead of classes. Inline should work with every Mail program.
Your html was full of errors which probably caused the issue.
I took the time to fix it and this is the (now correct) markup:
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style type="text/css">
.normal {
font-family: "Arial";
font-size: 9pt;
line-height: 1.25;
color: #606060;
font-weight: 400;
}
.name {
font-size: 10.5pt;
color: rgb(119, 187, 65);
font-weight: 700;
}
.link {
color: rgb(17, 85, 204);
}
</style>
</head>
<body>
<div class="normal">
<span class="name">Rostislav Janda</span><br/>
Obchodní zástupce<br/>
<br/>
<a class="link" href="tel:+420%20721%20604%20707" value="+420721604707" target="_blank">+420 721 604 707</a><br/>
<a class="link" href="http://www.iqbudovy.cz"> www.iqbudovy.cz</a>
<br/>
<br/>
IQ Budovy s.r.o.<br/>
<a class="link" href="[map link]">Mečířova 5, 612 00 Brno</a><br/>
<br/>
<img alt="IQ_Logo" src="[image address]"/>
<br><br><br>
</div>
</body>
</html>
What was wrong?:
You use the <br> tag wrong. It's <br/> and not </br>
One of your image tags was not closed properly
One of your hyperlinks (<a>) was not closed
You use style="" instead of class=""
I recently began construction of my first website, I'm still a beginner in html. My site has three buttons on the side, "Games", "Chat", and "About". They all have custom pictures, but it seems like there is a very small hyperlinked "-" in the bottom right of the button. Like a hyperlink, it turns red when clicked. Here is a picture of my clicking the "Games" button: As you can see, there is a small "-" hyperlink on the bottom right of the button.
Here is ALL my code for the games page:
<html>
<header>
<title>CBgames.com</title>
</header>
<body bgcolor=#474747 text=#FFFFFF>
<center>
<img src="siteimages/title.gif">
</center>
<a href="file:///C:/Users/user/Desktop/htmlwebsite/games.html">
<img src="siteimages/gamesbutton.gif" onmouseover="this.src='siteimages/mouseovergamesbutton.gif';" onmouseout="this.src='siteimages/gamesbutton.gif'" />
</a>
<br>
<a href="file:///C:/Users/user/Desktop/htmlwebsite/chat.html">
<img src="siteimages/chatbutton.gif" onmouseover="this.src='siteimages/mouseoverchatbutton.gif';" onmouseout="this.src='siteimages/chatbutton.gif'" />
</a>
<br>
<a href="file:///C:/Users/user/Desktop/htmlwebsite/about.html">
<img src="siteimages/aboutbutton.gif" onmouseover="this.src='siteimages/mouseoveraboutbutton.gif';" onmouseout="this.src='siteimages/aboutbutton.gif'" >
</a>
<br>
<br>
<table Align="left" Border="1" Width="300">
<tr>
<td><center>Our Newest Games:</center></TD>
</tr>
<tr>
<td>
<center>Game</center>
<center>Game</center>
<center>Game</center>
</td>
</tr>
</table>
<style type="text/css">
body {
margin:0px;
padding-bottom:25px;
}
#footer {
color:white;
font:George, "Times New Roman", Times, serif;
font-size:16px;
width:1920px;
height:20px;
line-height:20px;
background-color:#474747;
text-align:center;
position:fixed;
bottom:0px;
}
</style>
<head>
<body>
<div id="footer">
COPYRIGHT © 2015 CB-GAMES.NET [SA] - ALL RIGHTS RESERVED
</div>
</body>
</body>
</html>
I'm still a newbie at this, sorry for any troubles.
This is the syntax for adding a URL in HTML
link text
An example of adding "Example" website URL would be like the following
Click here to direct to Example site
You have spaces between the start tag for the anchor and the image inside of it (and between the image and the end tag).
Spaces are text.
Text in a link gets underlined.
Reformat your HTML to remove the spaces.
There is still an awful lot wrong with your markup but here is a quick attempt of moving you along in the right direction:
<!doctype html>
<html>
<head>
<title>CBgames.com</title>
<style type="text/stylesheet">
BODY {
background-color:#474747;
color:#FFF;
margin:0;
padding-bottom:25px;
}
.titleimage { text-align:center; }
.buttons {
margin-bottom: 2em;
}
.buttons A { display:block; }
.table1 { text-align:left; border:solid 1px #000; width: 300px; }
#footer {
color:white;
font:George, "Times New Roman", Times, serif;
font-size:16px;
height:20px;
line-height:20px;
background-color:#474747;
text-align:center;
position:fixed;
left:0;right:0;bottom:0;
}
</style>
</head>
<body>
<dIv class="titleimage"><img src="siteimages/title.gif"></div>
<div class="buttons">
<a href="games.html"><img
src="siteimages/gamesbutton.gif" onmouseover="this.src='siteimages/mouseovergamesbutton.gif';" onmouseout="this.src='siteimages/gamesbutton.gif'" /></a>
<a href="chat.html"><img
src="siteimages/chatbutton.gif" onmouseover="this.src='siteimages/mouseoverchatbutton.gif';" onmouseout="this.src='siteimages/chatbutton.gif'" /></a>
<a href="about.html"><img
src="siteimages/aboutbutton.gif" onmouseover="this.src='siteimages/mouseoveraboutbutton.gif';" onmouseout="this.src='siteimages/aboutbutton.gif'" ></a>
<div>
<table class="table1">
<tr><td>Our Newest Games:</td></tr>
<tr>
<td>
<div>Game</div>
<div>Game</div>
<div>Game</div>
</td>
</tr>
</table>
<footer id="footer">
COPYRIGHT © 2015 CB-GAMES.NET [SA] - ALL RIGHTS RESERVED
</footer>
</body>
</html>
I have sort of a image carousel which automatically and on hover swaps image thumbs with a big image header. And this is working perfectly, but now I have realized that I want to add some indication to each thumb currently displayed. I thought I could apply div.container img.current and give it some properties, values.. but it did not work.
So I thought I could ask you all for a good valid quick solution.
Here is my code
<div class="container-thumbs">
<div class="big-image-thumbnail">
<a href=".html"onmouseover="document.getElementById('bigImage').src='.jpg'">
<img src=".jpg" /></a><p>Title</p>
</div>
use j-query toggleClass() function
here is an example
<head>
<style>
p { margin: 4px; font-size:16px; font-weight:bolder;
cursor:pointer; }
.blue { color:blue; }
.highlight { background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p class="blue">Click to toggle</p>
<p class="blue">highlight</p>
<p class="blue">on these</p>
<p class="blue">paragraphs</p>
<script>
$("p").click(function () {
$(this).toggleClass("highlight");
});
</script>
</body>
i am surprised why these links have different color?here is code
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ka-ge" lang="ka-ge" >
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<style>
#links {
margin: 0 auto;
width: 4800px;
font-size:70px;
clear: both;
display: block;
}
#test a {
float: right;
}
</style>
<body bgcolor="green" >
<img src ='english.gif' style="float:right" width="88" height="88">
<img src ='russian.gif' alt="Russian flag" style="float:right" width="88" height="88"/>
<img src="georgian.jpg" style="float:right" width="88" height="88"/>
<div id="links">
<a href=" index.html " >მთავარი </a>
ბაკურიანი
გუდაური
ზღვა
კახეთი
სვანეთი
ვარძია
ქართლი
ძველი_თბილისი
</div>
</body>
</html>
when i run this in google chrome,everything has same color,except ზღვა(sea),კახეთი(kakheti),ვარძია(vardzia),ქართლი(qartli) all this name are in blue color,while others in other color,could you help me why is so?
These are the default styles for :visited or :active.
The :visited selector is used to select visited links.
The :active selector is used to select and style the active link.
A link becomes active when you click on it.
EDIT: To make them all the same style you can do this:
a, a:active, a:visited {
color: red;
}
That would style normal links, active links and visited links. You can also do rollovers using a:hover.
I have two questions:
When i run the code below, it shows me names of links in large form, after i reload, it is good, so what is problem?
I want to put spaces between names like this:
მთავარი ბაკურიანი გუდაური ზღვა კახეთი სვანეთი ვარძია ქართლი ძველი_თბილისი
How could i do this?
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<style>
#links {
margin: 0 auto;
width: 3000px;
font-size:70px;
clear: both;
display: block;
}
#test a {
float: right;
}
</style>
<body bgcolor="blue" >
<img src ='english.gif' style="float:right" width="88" height="88">
<a href="indexR.html"><img src ='russian.gif' alt="Russian flag" style="float:right" width="88" height="88"/>
<a href="index.html"> <img src="georgian.jpg" style="float:right" width="88" height="88"/>
<div id="links">
<a href=" index.html " >მთავარი </a>
ბაკურიანი
გუდაური
ზღვა
კახეთი
სვანეთი
ვარძია
ქართლი
ძველი_თბილისი
</div>
</body>
</html>
For question 2.): you could simply put a non breaking space in between:
კახეთი
სვანეთი
ვარძია
Which results in:
კახეთი
სვანეთი
ვარძია
Or you can add paddings/margins inside your style definitions so that anchors ("a tags") reserve some space to the left and/or right. The latte certainly is the preferred way to go.
You could use for space, it is a valid HTML string for space so it'll be validated by W3C too.
use between links to get spaces
<a href=" index.html " >მთავარი </a>
ბაკურიანი
გუდაური
indexR and index need closing </a> tags. Also for spaces use or css margins or padding.
For using space in your html application use
1) Entity name
 
;
Or
2) Entity Number
 
;
You can use %20 the HTML-ASCII syntax for the space character. I have found that sometimes doesn't work that well with links.
Add padding in anchor tag CSS file.
Directly applies to all anchor tag:
ul li a{ padding: 10px; }
Or if using any class then,
.classname ul li a{ padding: 10px; }
Though   is totally valid but do try this as this is a elegant way
<style>
.links
{
display:flex;
align-items:center;
justify-content:space-around;
}
.links a
{
flex:1;
text-align:center;
}
</style>
<div class="links“>
კახეთი
სვანეთი
ვარძია
</div>
How to make space between exemple: Home About Contact
.menu{
text-align: right; /*exemple*/
}
.menu1 {
list-style-type: none;
display: inline-flex;
}
.test{
color:red;
text-decoration: none ;
padding-inline-end: 55px; /*exemple */
}
<div class="menu">
<ul class="menu1">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>