embedded logos in menu bars - html

I want to know how some sites embedded their logos. I was looking at some source of popular sites expecting to see a .svg or image that would display the logo. However I found an <a>elements like:
LOGO NAME logo
How does that above code get transformed into a logo? Is data-gtm-action a custom attribute? Trying to work out what's going on here and I'm new to UI design.

As you can see in this link, you have a class:"logo ... the logo class contains probably some background-image css information.
Edit: and regarding the data attribut, you have a description here: http://www.w3schools.com/tags/att_global_data.asp
This attribute is very convenient to pass values without using input type="hidden".

Related

How to make a clickable link in pdf footer using wkhtmltopdf?

We want to use links in the pdf footer. We utilize wkhtmltopdf tool to generate our pdfs.
wkhtmltopdf wrongly places the clickable area few millimeters above the link itself
When we use absolute links in the footer like https://google.com pdf viewers recognize the links and allow to click on it
But we would like to show custom text for our links like Terms and conditions and so on. As a possible workaround, we were trying to overlay our link text over a transparent link using absolute positioning (codepen). It works well for html but doesn't work for pdfs.
Do we have some other possible options to get around the issue?
We implemented a JS workaround where we duplicate footer content and move it down by 135px. So the footer replica is invisible to the end users but it provides clickable areas for the original footer. We could do it because we have constant top and bottom margins.

Unable to switch properly between webpages

While I'm trying to switch between different sections of my webpage I am getting the following page as shown in the image. How can I solve this?
you need to provide context for your question for people being able to help you. I imagine you are trying to navigate between different html files, by clicking into an anchor tag, is that correct?
Go to next page
So in that case, you might be adding a wrong relative route, otherwise I think you should add more context to your question.
If you are trying to switch between sections on your webpage. Try adding section and giving them id. Then from any anchor tag you can reach the section by adding the following code.
Section 1
you can use jquery
$(".div").load("index.php .yoursection");
To switch between sections on your webpage,Use the id selector ,
Example:
<p id="opening">Hyperlinks are utilized by a web browser to move from one page to another...</p>
Now add the anchor tag to link,
Opening
"Opening" will be displayed as a link on the webpage. On clicking it, you will be switched on the same webpage where the id is "Opening".
In this example it is the paragraph tag.
If you trying to switch into another webpage,
Go to home page

Is any image link suitable for suitable for adding in html file?

I know I can add images to a html file by the following syntax
<img src="*****">
But my question is can i copy any images link from the web and add them to my html file?
i'm not talking about the copyright laws regarding this, just, can every image link be used as the image source in html?
I was writing a code in codepen where i embedded a link to an image from devianart, but the image didn't show up.
I think it depends to the website policy; Some websites don't let you to use their hosted images in your webpage, and some others do.
this is what i find on W3schools:
Definition and Usage:
The required src attribute specifies the URL of the image.
Note: When a web page loads; it is the browser, at that moment, that gets the image from a web server and inserts it into the page. Therefore, make sure that the image actually stay in the same spot in relation to the web page, otherwise your visitors will get a broken link icon. The broken link icon is shown if the browser cannot find the image.
The URL of the image.
Possible values:
An absolute URL - points to another web site (like
src="http://www.example.com/image.gif")
A relative URL - points to a file within a web site (like
src="image.gif")
Hope this is helpful :)
make sure image fully open in your browser tab/
i also check it but it work in codepen may be you doing something wrong first need to write clear what you want
try this image tag in codepen

Converting pptx file to html with links working

I have a pptx file, complete with working links which i would now like to convert to html. The idea really is to convert the pptx file into a website.
I am using Power Point 2010. I got some tips on how to do this conversion
# http://support.microsoft.com/kb/980553 and a tool which does exactly the same thing
# http://www.ultrashareware.com/Ultra-PPT-To-HTML-Converter.htm
I am able to get an html version,but the links do not work. Navigation is only possible by clicking the slide number created on the left pane of the created html frame.
My questions
1. How do i get the links on the html page to work as they did in the pptx
2. The main page is divided into 2 frames, the left showing the slide numbers. How do i get rid of the left frame entirely?
Thank you
Sameer
If you're interested in writing it yourself, it's a fairly substantial undertaking. The most direct method is to export an image of each slide and put that into the resulting HTML with an IMG tag. You'd also need to construct an image map and include in it each of the hyperlink URLs from the slide, along with coordinates normalized from PPT's slide size to the size of the image you're adding to the HTML. Or work out how to put links in DIVs atop the image.
If you're looking for an immediately available commercial add-in that gives you more control over the appearance of the HTML, I've written one. There's more info and a free demo at http://www.pptools.com/ppt2html/
I'd be happy to answer any questions you have about it, but it might be best not to clutter SO with support chat. There's a Contact link on each page of the pptools site; best to use that to get in touch, if you wish.

Is there a way to change the site title url in wordpress through css?

Im using wordpress.com to host my blog. When you click on the site image, it takes you back to the blog home page and not the homepage the belongs to my site.
I know how to change this with an installed wordpress through the editor menu.
However, I dont have any of these option on wordpress.com, however, I have full access to mutate stuff through css.
Is there a way to force CSS to make the changes for me.
Site
However, I want it to read
Site
Just to recap, I dont have an option to change this through the editor. My only option of changing this is through CSS.
I was thinking to use something like this to replace the text inside the herf. But I cant even get it to work with the example text.
Thanks a million.
No - CSS is a read-only way to style page content, not change the content itself (which that tag is a part of).