How will you locate the element using its “Click Payment History” text using XPATH & CSS?
<html>
<head>
<title>My Account</title>
</head>
<body>
<table>
<tr><td>John</td></tr>
<tr><td>Shield</td></tr>
</table>
<div>Click Payment History</div>
</body>
</html>
In CSS:
div
In xpath:
//div
Not maintainable but they'll work for your example.
A way to find xpath is Firepath an extension of Firebug.
Related
How do I make a link-text? I want to show how I tried do it. BeforeAfterResult
In HTML, links are defined with the tag:
link text
Example:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Links</h2>
<p>Visit google</p>
</body>
</html>
with javascript see here How do I create a link using javascript?
I have a paragraph in my website in which I have to highlight few words. Instead of using div and a class, I used a tag which I name myself as follows
<html>
<head>
<style>
highlight{
background-color:#FFF176;
}
</style>
</head>
<body>
A quick <highlight>brown</highlight> fox jumped over a lazy dog.
</body>
</html>
Here is the JSSFiddle
It seems to work fine. But is there anything wrong with this? Is it okay if I use it for a project?
There is nothing wrong in using custom tags. However, you didn't define the tags you used. Please see the links below to articles on proper ways to user custom tags/elements.
Using custom elements
Extending HTML by Creating Custom Tags
You can use this solution in a project, functionally it's ok but is advisable that you attach your tags with a common classname to define styles sheets (CSS), tags structures (HTML) and functionality (JavaScript) in differents source files.
I recommended you to put in a different file your CSS styles with a link-tag inside the head tag like this:
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
In this pages you can learn much more about it:
MDN Web Docs Mozilla
Though it is alright to do that, I would suggest the following: https://jsfiddle.net/838Lrnwk/
<html>
<head>
<style>
#high .highlight{
background-color:#FFF176;
}
</style>
</head>
<body>
<p id="high">
A quick <a class="highlight">brown</a> fox jumped over a lazy dog.
</p>
</body>
This would give the same effect; however, you can control what paragraph has the the effect in and all other tags like font,em, strong, etc and still retain the highlight.
This question already has answers here:
Is it necessary to write HEAD, BODY and HTML tags?
(6 answers)
Closed 4 years ago.
I have a code snippet which goes as follows:
<html>
<head>
<script></script>
<div class="container">
<div class="jumbotron">
<p>Hello I am Dikshit</p>
<ul><li class="">Hello</li>
<li> India</li>
</ul>
</div></div>
</head>
<body>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Hello Lorem popum
<p> Demo text</p>
</body>
</html>
How does this even work? What is the difference between head and body tags?
Please find here the output attachment.
The head tag is supposed to be used for information for including resources/information for the browser/search engines, so stuff like CSS links and scripts and meta tags.
If you add a div or any other visible HTML element, most browsers will still show it, but it's not technically valid and is advised against -- just put visible content in the body.
The reason why it works is that the browser knows what you wanted to do. But you might have troubles when you host it in an external server.
Tags help you structure your page. If a robot crawls your web, it knows to look for tags that define your webpage in the head, and for the content that is defined in the body.
Suppose I have two html files footer.html and main.html. The footer contains a reference to the top of a page as follows:
<!-- footer.html -->
<!doctype html>
<html lang="en">
<head></head>
<body>
<footer>
<small>To top</small>
</footer>
</body>
</html>
The main.html file embeds the footer by using the <object> tag (see note 1) as shown below. There can be several files similar to main.html. Because of this <a href="page#header"> may not be used.
<!-- main.html -->
<!doctype html>
<html lang="en">
<head></head>
<body>
<div id="header">...</div>
<div id="content"> Long content ... </div>
<object id="footer" type="text/html" data="footer.html"></object>
</body>
</html>
Question: Is it possible to refer to the anchor from the footer to main without using javascript, php etc?
Note 1: The <object> tag can be used to embed another html, although without a relation:
You can also use the <object> tag to embed another webpage into your HTML document.
from http://www.w3schools.com/tags/tag_object.asp
The same can be done using <iframe> or <embed> instead of <object>, but the issue remains.
Is it possible to refer to the anchor from the footer to main without using javascript, php etc?
No, it isn't.
If you use a relative URL, then it will be relative to the document that the link appears in (i.e. the footer).
If you use an absolute URL, then you have to specify which document you want to link to the top of (and since multiple documents will embed the footer, you can't do that).
You've ruled out generating the URL programatically with JavaScript.
Thanks to all for the comments and answers. Indeed, this approach seems not to work due to a missing relation between html files. In other words, footer.html cannot refer to the inside of main.html. Instead, I modified the structure, so that the main includes the footer directly and the content is embedded by using an <iframe> as follows:
<!-- main.html -->
<!doctype html>
<html lang="en">
<head></head>
<body>
<div id="header">...</div>
<iframe id="content" name="contentframe" src="content.html"></iframe>
<footer id="footer">
<small>To top</small>
</footer>
</body>
</html>
This solves the issue and works without JS, PHP or the like independently of the page loaded into the <iframe>. That is, it simply jumps to top keeping the contents of the loaded page. Eventually, there is one main and multiple long content pages which are loaded into this main. Tested with FF and IE.
I want to take something like this:
....
</head>
<body>
<h1>Some custom content for current route</h1>
</body>
</html>
instead of empty body tag:
....
</head>
<body>
</body>
</html>
Is it possible?
Learn how to use the Spiderable package in your project