In this video,
we will examine the tag categories that are relevant for media
links and discuss image media in particular.
In order to be able to extract media links,
we need to know how to identify them.
So we'll now look at the various types of media links
and how we can identify and use them.
In the previous module,
we looked at the basic difference between text‑based
web resources and media resources.
Just as we predominantly expect to see text resources contained in HTML tags,
for example, like div, span, and header and so on,
we can also generally expect media resources to be contained in
specific HTML tags created for that specific purpose.
Note that I say generally because, as in almost everything,
you'll come across exceptions that need to be handled on a case‑by‑case basis.
HTML tags can be split into different categories.
The most common ones we're used to are basic.
These include basic tags such as HTML, body,
horizontal rule, new line, or break rule.
Formatting deals with how text resources are displayed,
making text bold, italic, and so on.
And the form category handles markup that relates to sending
collections of data between the browser and the server,
and sometimes we have to use that in relation to media.
The tags categories we are mostly interested in when dealing
with web media are those related to images,
audio, video, links, and meta information.
When we think web media, we generally focus first on images.
There's a complete category of tags specifically dedicated to images that cover
everything from the simplest to the most advanced use cases.
The tags that we come across the majority of the time are image,
canvas, and SVG.
Each tag has different attributes.
For image, some of these are alt, height, width, and src.
Alt is useful because when we're trying to identify something about the image,
frequently, the alt image helps us out.
The most important as far as were concerned from a scraping point
of view is the src or source of the image tag.
The src tells us where the image is loading from,
and it can be given to us either as an absolute or a relative path.
The important difference between the two is that an absolute
path is the full link to the image file,
where the relative one is only partial.
And we need to add the domain name of the website we're examining to the
front of that URL in order to be able to retrieve the file.
We'll cover this in detail in a later video.
Canvas is an interesting type of web media.
It describes an area on the browser where an image
is drawn dynamically using code.
The code generally used for this is JavaScript,
and it is common to find it in more modern websites,
especially those using animation and displaying charts and other data.
Canvas can be tricky to work with depending on what the
data displayed on the canvas actually is.
As the canvas media type is dynamic,
we generally need to render it before we can capture the image's displays.
The easiest method to achieve this is to use a fully
automated browser such as Selenium.
If you need to work with images from the canvas,
you should have an understanding of how to use an automated browser,
such as Selenium.
There are a number of excellent courses covering
Selenium on the Pluralsight website.
Be sure to check for them.
SVG is quite like canvas.
The three letters stand for scalable vector graphics.
SVG is described in an XML‑based format that defines a series of
lines and shapes, and these can be rendered in a page at any
size without using visual clarity.
SVG appears to us in the browser source code either as a link
to an SVG file or as embedded code. Regardless of how it
appears to us, once we have the file,
we need to process it further if we want to extract
data from it. Later in the course,
we'll look at examples of different types of conversion
from one type of media to another.
Before we start to look into the mechanics of extracting links,
I want to point out that not all links are straightforward,
and not all can be identified easily.
It is becoming more common for websites to be constructed
these days using frameworks such as Angular,
ReactJS, Backbone, and Vue. And while these technologies make life
easier for the developer who creates the website,
it can make things complex for us when we are trying to extract the data.
In particular,
I want to point out the challenge that can occur when websites
are highly dynamic and when the data we're trying to extract is
not present in the obvious places.
In this case,
you need to put on your Sherlock Holmes hat and examine how the web
framework being used in particular actually works and how you can best
identify and then extract the links that you require.