I'm a beginner, alright?
I'm trying to build an HTML page that needs social media logos. I have all the ones I need except for good reads.
https://www.goodreads.com/
I can't find how to build one in CSS. I've tried to copy the image, that doesn't work. Does anyone else know how to build a goodreads tag?
you can download a goodreads svg at Goodreads, open the file in your editor, copy the content and put it where you need it in your HTML file.
On goodreads.com, copy the image address and paste in into a new tab. If the new tab contains only the image, copy the image address again and paste it between the src tabs. Otherwise, keep copying the image address from the new pages.
Depends if you want to just put in the logo or make the logo a link to your goodreads account
For just the image you could use
<html>
<head>
<!--Put your metadata and link css here-->
</head>
<body>
<img src="https://i.stack.imgur.com/g0KBL.png" alt="Goodreads">
</body>
</html>
And for a social media link I recomend using a icons library like FontAwesome
<html>
<head>
<script src="https://kit.fontawesome.com/393a279287.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="fa fa-goodreads"></div>
</body>
</html>
Anyways good luck!
Related
I have been tired of writing code but the icon is not shown on the Web page, I have tried changing the background still not seen.
to add fontawesome icons, you first need to make an account on https://fontawesome.com.
Once you made an account, then simply go to https://fontawesome.com/kits to make a new kit for your project. It is very easy to make a new kit on their. All you need is to just follow the instructions given by them.
Finally you will be able to see something like "Add Your Kit's Code to a Project". Copy kit code from there and paste it in the header part of your HTML file.
Here is an example of how to link it to your HTML file. (Please note that this won't display anything because this is not a valid fontawesome kit.)
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<script src="https://kit.fontawesome.com/YOUR_OWN_KIT_CODE.js" crossorigin="anonymous"></script>
</head>
<body>
<i class="fas fa-cloud" style="font-size:48px;color:red;"></i>
</body>
</html>
Thanks and best regards!
[I've tried seemingly everything and nothing is working for this seemingly simple and mundane css and html. I'm using external css as I was told that's easier on a larger scale for later projects but right now I'm just learning basics. Before you ask, yes, they are both in the same folder and using developer tools I can see that it is properly linking, but it appears the browser isn't reading it and it just looks like a text doc. Running the code works perfectly through here so I don't understand what's wrong. I'm using safari on MacBook and have also tried chrome - should I use a different browser or?
Edit: As you can see in the images my user profile includes Null (part of my name) I believe that's what's messing with it, is there a way around that?
h1{
color: red;
}
p{
color: orange;
}
<!DOCTYPE html>
<html>
<head>
<title>First Coding</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>First code</h1>
<p>Welcome to my first set of code!</p>
</header>
<NAV>
<ul>
<li><a href "#">nice</a></li>
<li><a href "#">cool</a></li>
<li><a href "#">rad</a></li>
</ul>
</NAV>
<footer>
<p>Nice amiright?</p>
</footer>
</body>
</html>
There actually 2 ways to achieve that. The first Method has been already stated and that is to link the external CSS inside the head-element of your website:
<link type="text/css" rel="stylesheet" href="url to the external .css" />
The second method however has not been mentioned yet which imo is the better one. Create an own .css file and link your website to it. Then add following line at the very top of your css file. That allows you do overwrite or change specific element of the css that you might cant access on your own:
#import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
We have two various types of Href
Absolute Path [it's added through an External Link]
Relative Path [it's added through an Internal Link]
The way you wanted to have is definitely the first item of the above-mentioned issues.
It'd be like this:
<link rel="stylesheet" type="text/css" href="http://example.com/[Path]/file.css">
I am using Sublime text to write some HTML and CSS files. I've created my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>RainyDayBakes</title>
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 style="text-align:center">RainyDayBakes</h1>
<nav style="text-align:center">
<a href=”C:\Users\sarah\Documents\Simmons\CS-321\page1.html”> About </a>
<a href=”page2.html”> Menu </a>
<a href=”page3.html”> Gallery </a>
<a href=”page4.html”> Order </a>
<a href=”page5.html”> Contact Us </a>
</nav>
<img src="cake.png" alt="oreo crumble cake" class="center">
<h3>Welcome to RainyDayBakes!</h3>
<p>We are a local bakery specializing in creative cakes, cupcakes and cookies!</p>
<p>In addition to being open daily we also offer custom ordered confections.</p>
<!-- Scripts -->
<script src="scripts/index.js"></script>
</body>
<footer>
</footer>
</html>
my page1.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>This is Page One </title>
</head>
<body>
</body>
<footer>
</footer>
</html>
and my style.css:
<style>
h1 {
color:red;
}
</style>
When I try to run index.html in Chrome, the link to page1.html says it doesn't exist, and the CSS won't show up. They're all in the same folder, I've saved all the files, and I'm running on Chrome. Every other solution I've found refers to making a typo, the directories being different, etc. but as said, they're all in the same folder, and I haven't noticed a typo (but it's entirely possible when you're too close to your code).
First off, you're not even using the tag anywhere in your code, so that's why the style isn't showing up. Secondly, if they are in the same folder, just link your about page to page1.html; not the full directory listings.
You are using typographical quotes in your links' href attributes, which won't work. Change those to regular quotes.
Let the link be this way instead href=”page1.html”
You might want to put a link to your CSS file on all your pages, I don't see it on your page1.html You probably already know about this resource but I mention it just in case you don't: W3 Schools is very handy for a quick reference to a lot of HTML/CSS questions.
So you have two issues:
For page1.html, would suggest adding file:// or file:/// to the beginning of the href element, or maybe retyping the line since the other links worked
For your CSS, remove the tag, it's for when you put the style inside the HTML file(embedded)
This isn't an issue with your code. I was having the same exact problem too and i recently discovered that the problem likely lies in the IDE that you're using. I was using stackblitz and recived the same output. But when i switched to an online compiler and litteraly copy & pasted the code with the same file names, the code started working correctly. Try using an online compiler and see how that works out for you. It worked for me.
The compiler I used is:
https://www.onlinegdb.com/
make sure to switch the languate to HTML using the language dropdown on the top right corner.
I am trying to create a custom logo for my website through a .png file, as soon as I type in the code and test run it through local host, the file does not display the logo image.
Renaming the .png file
Checking for spelling
Checking for capitalization
Tried adding a "-" inbetween ("holyland-logo.png")
Tried adding a color brown ("images/brown-holylandlogo.png")
<html>
<head>
<title>HolyLand Souveniers</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="top-nav-bar">
<div class="search-box">
<img src="images/holylandlogo.png" /> (This is causing the issue)
<input type="text" class="form-control">
<!--This is a search box -->
<span class="input-group-text"><i class="fa fa-search"></i></span>
<!--Search Icon -->
</body>
</html>
I expected the logo to appear on the top left of the website, but is it not doing anything, is it only giving me an X with no .png logo picture.My file pathing and folders as requested in the comments
If you don't put an / at the beginning of the image URL (relative path) the server expect to have the images folder next to your index point (index.html/php) but if you put one at the beginning (absolute path) it tries to go from the root of your Apache/nginx. Just to clarify.
In your case that means, you need to make sure the images' folder is next to your index.html or index.php.
Another tip: avoid spaces between the = in HTML and place your style after external styles in case you want to override parts of those.
But please give us more information about your environment, so we can help better:
Where is you site hosted (locally/provider)
Which is the URL you tried to access or file
Your folder structure
Your setup (OS, apache/nginx, PHP...)
According to your screenshot the HTML file and the PNG file are in the same folder, so your file path is wrong: In the img tag, instead of src="images/holylandlogo.png" just write src="holylandlogo.png" .
I've clicked on your public link and looked at my Chrome console logs:
Failed to load resource: the server responded with a status of 404 (Not Found)
for following resources:
style.css
holylandlogo.png
favicon.ico
https://apollo.waketech.edu/~smbannoura2/holylandlogo.png shows the image, so
<img src="holylandlogo.png">
should work for your html page.
For style.css and favicon.ico, check the file path as suggested in previous answers
I solved the problem by adding <img src="holylandlogo.png"> instead of what i originally had <img src="images/holylandlogo.png" /> since i had the logo in the same file. Thanks to a reply in the comment that Esdee stated. For more details you can read throughout the post on what other things i tried.
you need to put the images folder with the image in the source files of your website. Otherwise, use the original website link for the image
I have a private (not public) website. In this website I want to use Lightbox2 (image gallery), but when I run lightbox2, the links of my home page and my background picture don't work.
There is a style.css in my template, and there is also one in lightbox2. I think this is the problem, but I'm not sure. Can anyone help me please?
Simply load in your own stylesheet and the one lightbox uses in the header
<link rel="stylesheet" href="css/lightbox.css">
<link rel="stylesheet" href="css/my_style.css">
At the end of the page you must also load in the javascript that comes with lightbox:
<script src="js/lightbox-plus-jquery.js"></script>
Don't forget to set the right attribute for all your pictures:
<a href="./pic.jpeg" data-lightbox="lightbox">
<img src="./pic.jpeg" style="width:100%">
</a>