How to find HTML Webpage elements in the Source page - html

I am looking for some way on how to view source of some elements in the webpage https://www.nseindia.com/live_market/dynaContent/live_watch/get_quote/GetQuote.jsp?symbol=ITC&illiquid=0&smeFlag=0&itpFlag=0
In that page, under the tab Company Information, we have Company Announcements like Press Release, Allotment of ESOP/ESPS etc. Under each of these headers, there are more information provided. However when I look into the Source-page, I dont see those information.
Any idea on how to find those information in the source-page.
Thanks for any pointer.

They are siblings of the title, not children.
<h3 class="alt active">
<span id="ca21">Allotment of ESOP/ESPS</span>
<span class="date" id="ca22">26-Oct-2018</span>
</h3>
<div class="alt" id="ca23" style="display: block;">ITC Limited has informed the Exchange regarding allotment of 986060 Equity Shares under ESOP</div>

Related

How can I tell if I nested microdata correctly within my code?

I am new to microdata, and have to try and put together an assignment.
It requires "At least one itemtype should be embedded (or nested) in another itemtype: the value for at least one itemprop should itself be another itemtype with its own set of properties."
The code I came up with is this:
<div itemscope itemtype="https://schema.org/Person">
<div style="white-space: pre-wrap;">
<span itemprop="description">
Since I am still in my <span itemprop="knowsAbout">library and information science program</span>, I do not have as many finished projects as I wish to showcase here.
</span>
I have been performing coursework on reference and information services, information organization (including metadata), and an introduction to technologies that are used in the library sciences field, such as database management.
<div itemscope itemtype="https://schema.org/Action">
I have done a few <span itemprop="result">library science projects</span> over the last year that have been recently completed. Actually, this<span itemprop="result"> early version of my website</span> you are on is one of them! I programmed this
myself over the course of several days using a combination of HTML and CSS to create this website experience.</div>
<div itemscope itemtype="https://schema.org/CreativeWork">
Another project I have worked on is a <a itemprop="exampleOfWork" href="link_insert_here" target="_blank">LibGuide</a> (a library research guide) for LGBTQ+ characters in Comic Books and Graphic Novels. I have also created several learning aids.
First is an example of a <a itemprop="exampleOfWork" href="handout.pdf" target="_blank">handout</a> I created discussing some basic information on virtual machines. This is an example of a <a itemprop="exampleOfWork" href="link_insert_here" target="_blank">video tutorial</a> I created on how to sign up for a Local Public Library eCard.
</div>
</div>
</div>
I'm not sure I nested everything properly, and when I use various structured testing tools it picks up my microdata. While it seems right, I just can't tell.

WCAG 2.0 redundant links

I've tried searching but can't seem to find a straight answer regarding redundant links and WCAG compliance.
I have a product collection/category page with a list of products. Each product has a product image, name, price, and 'Learn More' button. The product image and 'Learn More' button both go to the same destination.
<div class="product-wrap">
<div class="product-image">
<img src="product-image.jpg">
</div>
<div class="product-name">
Sample Product Name
</div>
<div class="product-price">
$29.99
</div>
<div class="product-learn-more">
Learn More
</div>
</div>
Based off what I've read having adjacent links go to the same location is not compliant.
I can't link the whole product since I don't want everything clickable so I'm not sure what my options are.
Does anything have any idea how to make this compliant?
The guidance from W3C states that you should wrap the image and the text in a single anchor element. They also state that you must not omit the alt attribute, as this would cause failure of SC 1.1.1.
If this isn't an option in your instance, one possible solution that comes to mind is to use the aria-hidden attribute on your div.product-image.
Authors MAY, with caution, use aria-hidden to hide visibly rendered content from assistive technologies only if the act of hiding this content is intended to improve the experience for users of assistive technologies by removing redundant or extraneous content.
https://www.w3.org/TR/wai-aria-1.2/#aria-hidden

How to hCard company information?

I'm tying to markup some content semantically. The content is company information, which may have multiple addresses, multiple phone numbers, multiple email addresses.
The hCard generators that I see seems to expect a person's details (e.g. first name, last name, etc.).
Is there a way to markup just company details? If so, how?
Also, is hCard the correct format to use?
you can use multiples of most microformats' properties, as long as you heed the parental element(s), so in your case, as long as all the multiple data properties are children of .vcard and not .vcard as well, all is good. actually threw this together from two of their examples on http://microformats.org. here you go:
<div id="contact" class="vcard">
<h2>Contact Me Yo!</h2>
<h3 class="fn">Jane Doe</h3>
<p>You can contact me via email to
<a class="email" href="mailto:jane#example.com">jane#example.com</a>,
or reach me at the following address:</p>
<div class="adr">
<span class="type">home</span> address:
<div class="street-address">123 Main Street</div>
<span class="locality">Any Town</span>, <span class="region">CA</span>,
<span class="postal-code">91921-1234</span>
</div>
<div class="adr">
<span class="type">work</span> address:
<div class="street-address">789 Main Street</div>
<span class="locality">Any Town</span>, <span class="region">CA</span>,
<span class="postal-code">91921-1234</span>
</div>
</div>
references:
http://microformats.org/wiki/hcard-faq#Can_you_have_multiple_value_elements
http://microformats.org/wiki/hcard-faq#How_do_I_markup_multiple_addresses
is hcard the correct format to use?
100% absolutely...microformats are part of the html5 spec, they are the most widely used semantic web technology, they fit your exact needs, and they are (currently) indexed by the major search engines. microformats add levels to your document that most refuse to believe, but all you have do to is follow instructions, and you've got a pre-baked api in your markup.
that said, google/bing/yahoo!/yandex (? the russian search engine), have all openly endorsed schema.org, and while they support microformats (have for years), you'd be a fool to think they won't give their method(s) incentive(s) to be used. i'm not aware of any that are entirely microformats vs. schema.org yet, but i'm sure they are on the way. at the moment, imo, its more about tying everything into g+ for google right now, so everything else is taking a backseat. which only speaks to my point(s)...
clearly i am biased, but that's about as clear and dry as i can be. i actually have the same mental debate for each and every client that puts me in the position to run wild with their markup...i have yet to break down and start using schema, however, i am quite prepared for them to ping me randomly, should google magically stop harvesting microformats.
To add company informations you have to simply add an org at the same level of the fn of your hCard.
Here is example:
<div class="vcard">
<a class="url fn org" href="http://compa.ny">Company Name</a>
</div>
Or you can try it with Microdata/Schema.org which will be more supported by the great search engine providers: http://schema.org/Organization

HTML, How do I left justify a picture even though im using CID?

I am trying to create an interface for emails. I want to import a picture but I can't do it without having cid. For example:
That works just fine. but i Can't seem to put the text to the left of the picture. Please look at the code below to get a better understanding!
<div style="background-color:black;">
<body style="font-color:white;">
<h1><i>Airline Credits</i></h1>
</br>
</ul>
Dear [FullName],<br/>
Thank you for your <i>Airline Credits</i> redemption. Below is a summary of your order:
<b>Order Date:</b>[OrderDate]<br/>
<b>Description:</b>[ItemName]
<br/><b>Redemption Amount:</b>[CostInPoints]
<br/><b>Order Tracking Number:</b>[OrderNumber]
<br/><br/>
<b>Please note:</b>
If you did not make this request, please contact us immediately at [AirlinePhoneNumber]. Our Customer Service Representatives are available to help you.
<br/><br/>
Please read the terms and conditions for Airline Credits Redemptions at [WebSiteAddress] about how you are provided your redeemed items. To view your Airline Credits balance, please click here
<br/>
<img src=cid:AirlineCredits.jpg/>
</body>
</div>
HTML email is pain - nothing inherent in it, but because Microsoft decided to make Outlook 2007, 2010, and 2013 use Word's horribly broken and poor HTML rendering implementation (whereas Outlook 2003 used IE's).
Outlook has poor floating box support, so I advise against it in this situation.
Anyway, ordinarily I'm a web-standards zealot - but in HTML email that doesn't really seem to matter, so I'd just say to use tables, like so:
<table border="0"> <!-- Tim Berners-Lee, forgive me, for I have sinned. -->
<tr>
<td>
<p>Please read the terms and conditions for Airline Credits Redemptions at [WebSiteAddress] about how you are provided your redeemed items. To view your Airline Credits balance, please click here</p>
</td>
<td> <img src=cid:AirlineCredits.jpg /> </td>
</tr>
</table>
Relatively painless, gets the job done.
(and causes me to die inside).

How would I go about making my q and a page like this: http://www.text-link-ads.com/r/faq

My q and a page sucks - it's this: http://rankingclimber.com/qa.php
I checked out http://www.text-link-ads.com/r/faq and i really liked how the questions were clickable and the answers came down below.
I checked out the source code for text-link-ads.com and found the below code. But I feel like this requires some css file or some .js file in addition to this. can someone help me and give me instructions on how to do this? I have a basic knowledge of html and css.
<ul class="faq">
<li>
<a onclick="$('#advQ1').toggle();">What makes Text Link Ads unique?</a>
<div id="advQ1" style="display:none">
Text Link Ads are unique because they are static html links that can drive targeted traffic and help your link popularity which is a top factor in organic search engine rankings. </div>
</li>
<li>
<a onclick="$('#advQ2').toggle();">How are Text Link Ads priced?</a>
<div id="advQ2" style="display:none">
Text Link Ads are priced at a flat rate per month per link. You prepay for a 30 day run of your ad, and your account will be set on recurring billing either via PayPal or credit card. Your ad will never be turned off if it gets too many impressions or clicks. Our pricing algorithm factors in a website's: traffic, theme, ad position, and link popularity when setting the flat ad rate per month. </div>
</li>
<li>
<a onclick="$('#advQ3').toggle();">I just placed an order, when will my ad go live?</a>
<div id="advQ3" style="display:none">
Most links are placed within 48 hours of the order being received. New ads require our publisher to review and accept the ad. The 30 day billing period will not begin until your ad is actually live. </div>
</li>
<li>
<a onclick="$('#advQ4').toggle();">What is Alexa?</a>
<div id="advQ4" style="display:none">
A website's "Alexa" ranking is a general indicator of the amount of traffic a website receives. The lower the number the more traffic that site receives, ie Yahoo.com is #1, Ebay.com is #8. More information on Alexa here. </div>
</li>
<li>
<a onclick="$('#advQ5').toggle();">How do I review my active running ads?</a>
<div id="advQ5" style="display:none">
You can review your current running ads here </div>
</li>
</ul>
This is a pretty broad topic, there are many ways to do it but I would start by looking at the tweening functionality in jQuery - http://jquery.com/
This is the javascript library that was used in that site, you can tell by the use of the $('#inputID') pattern.
There are great examples on the jQuery site as a starting point.
Each anchor above has an onclick attribute that tells jquery to toggle the visibility of it's corresponding DIV - $('#advQ1').toggle(); - where $('#advQ1') is the element to target and .toggle() is the jQuery function to run on it. You can target any element in the DOM by it's ID or class name $('.className');
Edit:
If you are just beginning jQuery then in particular check out the show(), hide() and toggle() functions:
http://api.jquery.com/show/
http://api.jquery.com/hide/
http://api.jquery.com/toggle/