I'm trying to decide the best way to automate adding text overlays onto images for a resource library I am creating. I have hundreds of these kinds of resources where I grab a "sample image" of the item that I then manually, in a graphics program, add the resource name overlay. It would be great if I could just upload the image and then in the HTML add the resource name and have it overlay the name and round the corners of the image and make it look right. An example of what I am trying to do is at http://digitallearning.pcgus.com/Pepper/PPB/General/leadership.html. This is all manual at this point and the more I can automate the better the process of creating this will be. Thanks in advance for any advice/code I could use.
thanks for asking on SO!
In future, we would all appreciate it if you could add your code at the moment, if any.
There are multiple ways to do this, it all depends on how you write code.
The way I would do it is using a bootstrap row (for inline images), then insert this code (modify for your application):
HTML:
<div class="col-xs-4">
<div class="imageTextContainer">
<div class="imagePart">
<img src="imgSrcHere" />
</div>
<p>Your text here</p>
</div>
</div>
<div class="col-xs-4">
<div class="imageTextContainer">
<div class="imagePart">
<img src="img2SrcHere" />
</div>
<p>Your text here</p>
</div>
</div>
<div class="col-xs-4">
<div class="imageTextContainer">
<div class="imagePart">
<img src="img3SrcHere" />
</div>
<p>Your text here</p>
</div>
</div>
Custom CSS:
.imageTextContainer {
height: 250px;
background-color: #0000FF
}
.imagePart {
height: 230px;
}
.imagePart > img {
height: 100%;
}
Hope this helps.
The reason this works is because the div containing the images and text is 250px high, however the images are set to 100% of 230px, so you get 20px for text. You can obviously modify these values however
This is what I ended up with that seems to have addressed my particular needs.
.wrap {
/* force the div to properly contain the floated images: */
position:relative;
float:left;
clear:none;
overflow:hidden;
}
.wrap img {
position:relative;
z-index:2;
width:200px;
height:125px;
border:2px solid #1F497D;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
z-index:1;
}
.wrap img:hover {
-webkit-filter: brightness(70%);
-moz-filter: brightness(70%);
-o-filter: brightness(70%);
-ms-filter: brightness(70%);
filter: brightness(70%);
}
.wrap .desc {
display:block;
position:absolute;
width:100%;
top:55%;
left:0;
background-color: rgba(31,73,125,0.85);
font-family: 'Arvo', serif;
font-size:11px;
color: #FFF;
text-shadow: 1px 1px #111111;
font-weight:normal;
display:flex;
text-align:center;
justify-content:center;
align-items:center;
bottom: -5%;
-webkit-border-radius: 0px 0px 10px 10px;
-moz-border-radius: 0px 0px 10px 10px;
border-radius: 0px 0px 10px 10px;
z-index: 1;
}
<!DOCTYPE html>
<html>
<head><title>Client Resources</title>
<link href="learningmat.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Arvo|Alice|Roboto|Roboto+Condensed|Alegreya:700">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<body>
<div class="list">
<h1 class="list2">Client Resources</h1>
<hr class="list2">
<p>SOME KIND OF DESCRIPTION</p>
<img src="imgs/spacer.png" class="spacer2">
<a href="docs/03 - How do we define urgency.pdf" target="_blank">
<div class="wrap">
<img src="imgs/Urgency.jpg" />
<h3 class="desc">How Do We Define Urgency?</h3>
</div>
</a>
</div>
</body>
</html>
If anyone sees any improvements or changes, please let me know.
Related
I am currently learning css. I was hoping to create a gallery of 3 images lined together under a short paragraph on top. However, I am having trouble lining the images on a single line, and scaling them.
This is the html:
<!DOCTYPE html>
<html>
<head>
<title> Wardrobe Inspiration </title>
<link rel="stylesheet" href="wardrobe.css">
</head>
<body style="background-color: gainsboro;">
<div>
<h1>Welcome to my gallery of ideas for your wardrobe</h1>
<p1> Get inspired and unleash your inner Coco Chanel! </p1>
</div>
<div>
<h3>The benefits of a minimalist wardrobe...</h3>
<div>
<ul>
<li>Gives you additional space in your room</li>
<li>Makes it quicker and easier to choose clothes in the morning</li>
<li>Helps your style get simpler and more elegant</li>
</ul>
</div>
</div>
<div ID="stefets-picture" ID="stefets-picture:hover" class="gallery-item">
<img src= "minimal1.jpeg">
</div>
<div ID="stefets-picture" ID="stefets-picture:hover" class="gallery-item">
<img src= "minimal2.jpeg">
</div>
<div ID="stefets-picture" ID="stefets-picture:hover"class="gallery-item" >
<img src= "minimal3.jpeg">
</div>
<footer>
<div class="checkout">
<p>Feel free to check out my</p>
<a href = "https://www.pinterest.fr/esploratempo/boards/" target="_blank" > Pinterest </a>
</div>
</footer>
</body>
</html>
And this is the associated css:
.gallery-item {
width: 25%;
padding: 5px;
border: 1px solid gray;
float: left;
margin-right: 10px;
}
.checkout{
text-align: center
}
p {
display: inline-block;
}
a {
float: center;
}
#stefets-picture {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
#stefets-picture:hover {
filter: none;
-webkit-filter: grayscale(0);
}
Where am I going wrong with the gallery? Any help is much much appreciated.
I had added some things and it works for me.
This is HTML
<!DOCTYPE html>
<html>
<head>
<title> Wardrobe Inspiration </title>
<link rel="stylesheet" href="wardrobe.css">
</head>
<body style="background-color: gainsboro;">
<div>
<h1>Welcome to my gallery of ideas for your wardrobe</h1>
<p1> Get inspired and unleash your inner Coco Chanel! </p1>
</div>
<div>
<h3>The benefits of a minimalist wardrobe...</h3>
<div>
<ul>
<li>Gives you additional space in your room</li>
<li>Makes it quicker and easier to choose clothes in the morning</li>
<li>Helps your style get simpler and more elegant</li>
</ul>
</div>
</div>
<div id="container" class="container">
<div ID="stefets-picture" ID="stefets-picture:hover" class="gallery-item">
<img src= "minimal1.jpeg" class="photo-class">
</div>
<div ID="stefets-picture" ID="stefets-picture:hover" class="gallery-item">
<img src= "minimal2.jpeg" class="photo-class">
</div>
<div ID="stefets-picture" ID="stefets-picture:hover"class="gallery-item">
<img src= "minimal3.jpeg" class="photo-class">
</div>
</div>
<footer>
<div class="checkout">
<p>Feel free to check out my</p>
<a href = "https://www.pinterest.fr/esploratempo/boards/" target="_blank" > Pinterest </a>
</div>
</footer>
</body>
</html>
And this is CSS
.gallery-item {
width: auto;
padding: 5px;
border: 1px solid gray;
float: left;
margin-right: 10px;
}
.checkout{
text-align: center
}
p {
display: inline-block;
}
a {
float: center;
}
#stefets-picture {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
#stefets-picture:hover {
filter: none;
-webkit-filter: grayscale(0);
}
.container::after {
content: "";
clear: both;
display: table;
}
.photo-class {
height: 200px;
width: auto;
}
This line:
.photo-class {
height: 200px;
width: auto;
}
gives you control of the height of your photos. All of them can be different size, but it will scale them to the hight of, in this case, 200px.
Also I have added "container" which will keep things organised and after displaying photos container class with ::after will clear the float and place footer underneath. Hope I halped. Good luck learning HTML and CSS ;)
here is a fix and solution for your page. the Galleries work on mobile view too, responsive size of each image
body {
background-color: gainsboro;
}
.gallery-items {
display: flex;
}
.gallery-item {
width: 33.33%;
}
img {
width: 100%;
}
.checkout {}
p {
text-align: center;
}
.stefets-picture {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
.stefets-picture:hover {
filter: none;
-webkit-filter: grayscale(0);
}
<div>
<h1>Welcome to my gallery of ideas for your wardrobe</h1>
<p1> Get inspired and unleash your inner Coco Chanel! </p1>
</div>
<div>
<h3>The benefits of a minimalist wardrobe...</h3>
<div>
<ul>
<li>Gives you additional space in your room</li>
<li>Makes it quicker and easier to choose clothes in the morning</li>
<li>Helps your style get simpler and more elegant</li>
</ul>
</div>
</div>
<div class="gallery-items">
<div class="stefets-picture gallery-item">
<img src="https://picsum.photos/200/300?random=1">
</div>
<div class="stefets-picture gallery-item">
<img src="https://picsum.photos/200/300?random=1">
</div>
<div class="stefets-picture gallery-item">
<img src="https://picsum.photos/200/300?random=1">
</div>
</div>
<footer>
<div class="checkout">
<p>
Feel free to check out my
</p>
<p>
Pinterest
</p>
</div>
</footer>
I made a little landing page and the client wants: "The text, Sourcing & Trading, CCTV security. Want to use overstriking.
Then all will be OK." I googled what overstriking is and I have to admit I'm a little hazy on the concept and not sure how to implement it with CSS at.
The code I tried is in the snippet bellow. Thanks in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Welcome</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<style>
footer{
position: fixed;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height:100px;
line-height: 10px; /* Vertically center the text there */
padding-top:10px;
background-color: #f5f5f5;
margin-top: 10px;
}
.main-buttons {
width: 400px;
height: 50px;
margin: 0 auto;
text-decoration: line-through;
}
span{
margin-left: 5px;
margin-top: 5px;
margin-bottom: 5px;
}
.main-container {
background-image: url('http://wenshin.ltd/wp-content/uploads/2018/07/logisticsworldmap-1024x586.png');
height: 100vh;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0.9;
filter: alpha(opacity=90); /* For IE8 and earlier */
}
.middle{
top: 50%;
}
.btn-lg {
box-shadow: 3px 3px #888888;
}
h1 {
text-shadow: 1px 1px #888888;
}
.logo {
width: 50%;
}
</style>
</head>
<body class="main-container">
<div class="container middle">
<div class="row ">
<div class="col-md-12 text-center ">
<div class="intro"> <br> <br> <br> <br>
<img src="http://wenshin.ltd/wp-content/uploads/2018/08/WS-01.png" class="img-fluid logo" alt="Logo"> <br> <br>
<h1 class="">WELCOME TO WENSHIN <br> INDUSTRIAL CO LIMITED</h1>
<p>
<a href="http://www.wenshin.ltd/index.php">
<button class=" main-buttons btn btn-light btn-lg mt-3">Sourcing & Trading</button>
</a>
</p>
<p>
<a href="http://www.cctvcamerahd.com/">
<button class="main-buttons btn btn-light btn-lg mt-3">CCTV Security</button>
</a>
</p>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<span class="text-center"><p><strong>Choose your language:</strong></p></span>
<span class="text-center"><p><span>English</span> <span>繁體中文</span> <span>Español</span> <span>Português</span> <span>Deutsch</span> <span>Français</span> <span>Italiano</span> <span>Pусский</span> <span>한국어</span> <span>日本語</span> <span>Nederlands</span> <span>غة العربية
</span> <span>Indonesian</span>
</p></span>
</div>
</footer>
</body>
</html>
I used:
text-decoration: line-through;
And I wondered if that's it or is there something alternative.
First of all, I would ask my client what he means by that.
Most people mean a strikethrough by saying overstrike.
You would just have to add this to your css for these buttons.
text-decoration: line-through;
As for the overstriking, it is an old technique used in the time of typewriters to write letters that where not on the "Keyboard". It doesn't really make sense anymore.
Cheers!
This just in.... I managed to answer my own question.
Since it turns out that (at least for my device) the inline «style» attribute accepts «/**/» comments like its stylesheet cousin, I thought it would be helpful to "good doctor" the code to make it easier to follow:
<p style="text-align: justify;">An element with «position: relative;»
[such as
<span style="/*Block setup*/display: inline-block; position: relative;
/*Adjust to match print baseline*/vertical-align: -7.5%;
/*Block width*/width: 6.5em;">
<span style="/*Element Name*/position: absolute;
left: 0em;">Cæsium (</span>
<span style="/*Isotope weight*/font-size: 60%; vertical-align: 55%;
position: relative;/**/ left: 6.0em;">133</span>
<span style="/*Atomic number*/font-size: 60%; vertical-align: -25%;
position: relative;/**/ left: 4.6em;">55</span>
<span style="/*Element Symbol*/position: relative;
left: 2.5em;">Cs)]</span>
</span> is positioned relative to its normal position:</p>`
The user may need to jiggle about the «width» and «left» properties to smooth out the spacing for their system (as well as prune the comments if storage space us at a premium).
I would like to ask for help with this task:
I would like to have a non-breaking-space between img and a piece of text. But the problem is, that sometimes the line between image and text breaks up even if the non-breaking-space appears.
Where am I wrong?
Here is the JsFiddle:
https://jsfiddle.net/cj7Lp1vy/9/
HTML
<div id="parent">
<div id="child">
<!-- some content -->
<div class="cl">
<img src="obrazky/plocha.png"> Plocha: 11 m<sup>2</sup>
<img src="obrazky/pocet_pokoju.png"> Pokoje: 2
<img src="obrazky/rekonstrukce.png"> Rekonstrukce: ne
<img src="obrazky/okna.png"> Okna: stará
<img src="obrazky/topeni.png"> Topení: dřevo
<img src="obrazky/typ_stavby.png"> Typ stavby: dřevo
</div>
</div>
</div>
CSS
#parent {
width:235px;
min-height:110px;
border:1px solid #CCCCCC;
padding:15px 10px 10px 10px;
margin:0px 12px 24px 12px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#child {
position:relative;
}
.cl {
clear:both;
}
img {
border:1px solid red;
width:16px;
}
You're going wrong because the Unicode specification for NBSP says that there shouldn't be a line break after the character. it doesn't stop there being one before the character.
To work around this, wrap the <img> and the in a span and give the span the styling white-space:nowrap;
I am building a website and I am still in the stages of learning, I'd say this is my most complex layout. Basically I have an unusual banner at the top of my page which I think is causing my problem. Above the footer of my page there is a large white space. I think it is caused by the face I have had to use things like top:-200px; on some of my divs so that they are in the right place.
It would really help to have someone with more experienced eyes to look it over.
Here is the website -
www.redchevron.co.uk
and here is the html -
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/header.css">
<link rel="stylesheet" type="text/css" href="css/font.css">
<link rel="stylesheet" type="text/css" href="css/footer.css">
<link rel="stylesheet" type="text/css" href="css/home_stylesheet.css">
<title>Red Chevron | Graphic Design</title>
<META NAME="description" CONTENT="At Red Chevron, we strive to bring you crisp, quality designs to suit your needs. Digital Graphics | Corporate Identity | Promotional Material">
<META NAME="keywords" CONTENT="graphics, rob, jeffrey, graphic, design, photoshop, logo, business, card, leaflet, flyer, freelance, red, chevron, redchevron, designer, digital, quality, media">
<script>
$(“body”).Scrollbar();
</script>
</head>
<body>
<div class="banner">
<div class="navigation">
<ul>
<li><a class="nav" href="index.html">Home</a></li>
<li><a class="nav" href="#">Portfolio</a></li>
<li><a class="nav"></a></li>
<li><a class="nav" href="#">About me</a></li>
<li><a class="nav" href="#">Contact</a></li>
</ul>
</div>
</div>
<div class="headround">
</div>
<div class="headlogo">
<img src="images/head_logo.png">
</div>
<!-- stop here for header -->
<div class="maincont">
<div class="mainfeat">
<img src="images/feat_flag.png">
<div class="maininfo"><!--feature-->
</div>
</div>
</div>
<div class="maincont">
<div class="mainfeat">
<img src="images/news_flag.png">
<div class="maininfo"><!--news-->
<h2> Coming Soon </h2>
Thank you for visiting Red Chevron.<br><br>
My name is Rob Jeffrey, founder of Red Chevron. I offer quality, affordable graphic design services to suit your needs.
Whether you need a new Corporate Identity, promotional material, or anything in between, I am here to make your ideas a reality.<br><br>
I have spent over 6 years refining and polishing my Digital Design skills in order to give my clients the very best results.<br><br>
Unfortunately this site is currently under construction.<br>
If you would like to contact me, please use the details below:<br><br>
Rob Jeffrey<br>
<b>Call:</b> 07925 870385<br>
<b>Email:</b> rob.jeffrey#redchevron.co.uk
</div>
</div>
</div>
<div class="maincont">
<div class="mainfeat">
<img src="images/pipe_flag.png">
<div class="maininfo"><!--pipeline-->
</div>
</div>
<div class="footer">
© 2014 Red Chevron All Rights Reserved
</div>
</div>
<!-- Start of footer -->
</body>
</html>
And the css -
Header -
*{
margin:0px;
padding:0px;
}
body{
overflow-x:hidden;
}
.banner{
width:100%;
height:80px;
position:relative;
z-index:10;
background-color:white;
box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.6);
overflow:hidden;
}
.headround{
background: #fff;
position:relative;
float: center;
margin:auto;
height: 76px;
width: 164px;
z-index:100;
-webkit-border-radius: 0px 0px 76px 76px;
-moz-border-radius: 0px 0px 76px 76px;
border-radius: 0px 0px 76px 76px;
box-shadow: 0 7px 12px 0px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 7px 12px 0px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0 7px 12px 0px rgba(0, 0, 0, 0.4);
}
.headlogo{
position:relative;
z-index:101;
width:124px;
margin:auto;
float:center;
top:-144px;
}
.navigation
{
width: 1300px;
overflow:auto;
margin:25px auto 0px auto;
padding:0px;
float:center;
}
ul {
list-style-type:none;
margin:auto;
padding:0;
text-align:center;
}
li {
display:inline-block;
float:center;
text-align:center;
font-size:34px;
font-family:walkway;
}
.nav {
display:inline-block;
width:250px;
height:30px;
color:black;
text-decoration:none;
text-align:center;
padding:2px;
float:center;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background-color: rgba(235,235,235,1);
-webkit-border-radius: 0px;
}
::-webkit-scrollbar-thumb:vertical {
background-color: rgba(231,52,39,1);
-webkit-border-radius: 0px;
}
::-webkit-scrollbar-thumb:vertical:hover,
::-webkit-scrollbar-thumb:horizontal:hover {
background: rgba(231,52,39,1);
}
::-webkit-scrollbar-thumb:horizontal {
background-color: rgba(231,52,39,1);
-webkit-border-radius: 0px;
}
Home page style sheet -
*{
margin:0px;
padding:0px;
}
body{
overflow-y:hidden;
}
.maincont{
margin:0 auto;
float:center;
width:1350px;
padding-left:1px;
height:auto;
z-index:1;
position:relative;
top:-220px;
color:white;
font-family:verdana;
font-size:11pt;
}
.mainfeat{
width:450px;
height:auto;
text-align:center;
float:left;
margin:auto;
}
.maininfo{
height:428px;
width:378px;
top:-56px;
z-index:-1;
position:relative;
background:#303030;
margin:0px 30px;
padding:61px 5px 5px 5px;
}
h2{
color:#e73427;
}
and Footer -
.footer{
width:100%;
height:auto;
text-align:center;
color:#b4b4b4;
font-family:verdana;
clear:both;
padding:10px;
bottom:-100px;
vertical-align:bottom;
}
Like I said I'm a beginner so if there is a much more logical way of constructing my banner and getting rid of the white space, please let me know.
Many thanks guys
It looks like the culprit is, as you say, your usage of position CSS. If I disable top: -220px; from your maincont divs, the gap is eliminated.
As for a solution...? I'm not too sure, really. There are plenty of neater ways to code what you're trying to do, using different methods, from what I'm seeing in your page source.
Perhaps someone else might be able to suggest ways you can fix it up, but from my perspective, I would redo more or less everything, because of other issues, such as the one we discussed in the comments regarding overflow-y. Plus, the width of the page and your overflow-x would essentially stop users on smaller screens/browser widths/resolutions from seeing a good chunk of the right side of your site.
Not the best nor neatest way to code, but sometimes a negative margin on the bottom the equivalent of the negative top works or change the top:-220px; to margin-top:-220px;
I am new to css . I am trying to display my images in a perfect manner
here is my html code:
<div id="photos">
<h3>Photo title</h3>
<P class="like">Like </P>
<p class="date">date </p>
<div id="image">
<img src="something.jpg" />
</div>
<p class="about">about image goes here</p>
</div>
Now i want to style the same like this:
http://www.desolve.org/
If you want to make your image like that wall post i did it in below given fiddle link.
http://jsfiddle.net/zWS7c/1/
Css
#photos{
margin:10px;
border:solid 1px red;
font-family:arial;
font-size:12px;
}
#photos h3{
font-size:18px;
}
.date, .like{
text-align:right;
}
.about{
margin:10px;
}
#image img{
width:100%;
}
HTML
<div id="photos">
<h3>Photo title</h3>
<P class="like">Like </P>
<p class="date">date </p>
<div id="image">
<img src="http://www.desolve.org/_images/chicago_banner.jpg" />
</div>
<p class="about">about image goes here</p>
</div>
Live demo http://jsfiddle.net/46ESp/
and now set to according to your layout as like margin *padding* with or height
I think you need like this
http://jsfiddle.net/VwPna/
From http://www.w3schools.com/css/default.asp you learn easily... and also you can check other website css from firebug in your browser.
below code is that you given site css for banner class.
.banner {
background: url("../_images/gallery_banner.jpg") no-repeat scroll 0 0 transparent;
height: 350px;
margin-bottom: 4em;
overflow: hidden;
padding-left: 3.9%;
position: relative;
}
same way you can give more style their.
Here is the way it is made on the link you gave.
HTML:
<div class="banner">
<h1>We love urban photography</h1>
<p>
We’re betting you do to. Welcome to our site, a growing collection of galleries taken by a small group of passionate urban photographers. Visit our galleries, buy some of our prints, or drop us a line. While you’re at it, feel free to submit a gallery of your own.
<strong>Welcome</strong>
.
</p>
</div>
CSS:
.banner {
background: url("../_images/gallery_banner.jpg") no-repeat scroll 0 0 transparent;
height: 350px;
margin-bottom: 4em;
overflow: hidden;
padding-left: 3.9%;
position: relative;
}
.banner h1 {
color: #FFFFFF;
font-size: 2.2em;
letter-spacing: 0.1em;
padding-top: 290px;
}
.banner p {
background: none repeat scroll 0 0 rgba(123, 121, 143, 0.8);
color: #FFFFFF;
font-size: 1em;
height: 350px;
padding: 1% 1% 0;
position: absolute;
right: 0;
top: 0;
width: 21%;
}
You only need to translate that to your id's, classes and form, then you have it
There's nothing special that they've done on the reference web site. They've used the image as a background property of a div class="preview".
Here is the (x)HTML:
<section class="chicago">
<h2>Chicago</h2>
<p class="pubdate">
<time datetime="2011-04-24" pubdate="">April 2011</time>
</p>
<div class="preview"></div>
<p class="caption">Big wind, big shoulders. See a different side of Chicago.</p>
</section>
And the corresponding CSS
.chicago .preview {
background: url(../_images/sm_chicago_banner.jpg) no-repeat;
}
You can always sneak-peek by right mouse click on the website and choosing "View Page Source" or something similar, depending on your browser :)