Hello. I have been given a fina assignment where I must create my own website. My professor at my college who has not really covered any type of HTML stuff wants us to create a webpage by scratch. The class is suppose to be an intro class to HTML. This whole time he has just made us work together to create a class application and not teach any of us beginners much about HTML. I have basically been teaching myself in order to try to understand what he been making us do. He has decided for us to create a logo image that has to appear in all banners of all my pages. He has never taught this to the class but expects us to be able to do it. And most the time if you ask him how he tells you to find it on google. So can someone please help with this. I am at my wits end.
based on your description, this is a class covering the basics of the basics of the basics.
I assume you are able to work a bit with paint shop pro, photoshop, or any of those. it's basically
'create, copy, paste' and you have your logo on your banners. since usually there is only one banner which is being re-used: only one image to adjust, not the end of the world, is it?
what you could do as well, is place one using css.
but, still, it's pretty common for a course on html and css, to have you figure it out on your own.
what exactly is it you're having trouble with? if you're being more precise, it'll be easier for us to help you out.
Using HTML only, you'd have to add the logo to each page. Unlike server side scripting languages like PHP, Asp.NET, etc.., there's no template or include file that can be built once and applied multiple times.
Do you need help with the logo itself, positioning, etc?
I am trying to create a layout with the simple layout of a header, followed by a navigation bar, a content part, then a footer. That would be used for all pages. Then I atleast have a spot for the logo. I looked in my book and tried the coding and couldn't get it to work.
ok, so to get some help on this, the best approach is to provide the HTML/CSS content you have so far and explain where you are having an issue with regard to the logo.
If you dont have any code as of yet, its going to be challenging to help you.
This is the css I am working with, though I want it to have everything in the content page to be centered. And I am trying to get the color for the background so that it is not all white and grey.
#container {
margin: 10px auto;
width: 95%;
border: 1px solid gray;
}
#header {
padding: 3px;
border-bottom: 1px solid gray;
}
#topnav-container {
border-bottom: 1px solid gray;
padding: 4px 0;
background: #e0e0e0;
}
#topnav {
margin:0;
padding: 0;
}
#topnav li {
display: inline;
list-style: none;
}
#topnav li a {
text-decoration: none;
padding: 0px 5px;
color: #333;
}
#content
{
margin: auto;
padding: 1em;
font-family: "Times New Roman",sans-serif ,arial, helvetica;
font-size: 1.0em;
line-height: 1.6em;
}
#footer {
clear:both;
padding: 0 3px;
border-top: 1px solid gray;
}
Here is the HTML that I working with. LIke I said, I would like anything in the content page to be centered.
<!doctype html>
<html>
<body>
<head>
<title>My Testing Page</title>
</head>
<link rel="stylesheet" type="text/css" href="test.css">
<div id="container">
<div id="header">
<h2>Header</h2>
</div>
<div id="topnav-container">
<ul id="topnav">
<li> <a href="#">Home</a> </li>
<li> <a href="#">Categories</a> </li>
<li> <a href="#">Services</a> </li>
<li> <a href="#">About us</a> </li>
<li> <a href="#">Contact us</a> </li>
</ul>
</div>
<div id="content">
<h3>Our Humble Beginnings</h3>
<p> Ye Olde Soap firsted opened up in 1900 in the good city of Royal Oak. Sue Wilkins was the orginal owner in the one store which was in her house. She wanted to sell soaps where all ingredients came from the earth. From that one store, three move stores have opened up in the United States. The other stores were placed in the states of Alabama, California, and Pennsylvania. In The year of 1945, Ye Olde Soap was taken over by Sue's eldest daugther Brittany. Brittany saw that the business of Ye Olde Soap was booming and the one store could not keep up with the demands. In 1960, the second store was opened in Pennsylvania. The following ten years the other two stores opened up. Business was going well. When the new owner Alyssa Wilkins took over in 2000, she decided to have a website to cater internationally. All stores have a family friendly atmosphere and sell organic soaps for those that are looking for environment friendly soaps. </p>.
<img src="http://blog.familytreemagazine.com/photodetectiveblog/content/binary/cooper-small.jpg">
<h4>Sue Wilkins</h4>
<img src="http://www.hockinghills.com/sloan/images/sloanhousecirca1900upclose.jpg">
<h4>The first Ye Olde Soap</h4>
</div>
<div id="footer">
<h2>Footer</h2>
</div>
</div>
</body>
</html>
I am not really sure how to create a logo that can go into the header I have created. That could be on the left hand side and the name of my website in the middle
Hi Alyssa,
You have a header section already in your HTML. Why not just add an <img> tag to it with the logo?
<div id="header">
<img src="path/to/my/logo.png" alt="Site Title">
<h2>Header</h2>
</div>
Okay. How do I create a logo?
How do I create a logo?
You need to use some type of image editor. It can be as simple as using MSPAINT, although that would be my last choice, but for a simple logo for a class assignment, its fine.
What are some other image editors that I can use?
Photoshop, Gimp.. there are a ton online, but these two are very common for advanced image creation/editing. There is a learning curve involved in using these products.
If its just for a class assignment, you may not have enough time to learn how to use those tools.
Okay. How do I create a logo?
You can use any Image Editor you know well
You can use MS Paint which is already installed with Windows & easy to use.
Or you can use Photoshop or Illustrator but you have to purchase them for that somewhat difficult they are.
To insert the logo in header you can use 'background-image' property.
So I just get a picture I want to use and edit it in ms Paint. Do I have to save the ms Paint file with all of my html and css. Then use background-image property?
Being an HTML/CSS class, I'd imagine your instructor's concern should be more about your ability to include a logo on your page rather than the artistic content of said image. So if you open MS Paint and just type in MySite.com or whatever, then save it as an image and include it with an <img> tag, that should be a fair demonstration of your understanding of the concept of including a logo. You may want to put use <a href="/"><img src="[image link here]"></a> to make the logo clickable.
There are many ways to put a logo onto a page, it really depends on what your instructor requested.
Finally, where you place your image file doesn't matter so much as long as you know how to link to it. For simplicity's sake, you may wish to leave it in the same folder as your HTML file so you can refer to it simply by its filename:
<a href="/"><img src="mylogo.jpg"></a>
Okay. I opened up Paint, got an image from google and did what I wanted. Saved the file as myLogo.jpg
I put that into my folder that holds all the html and css for the whole assignment. I copied and change your second coding a little and nothing still happened.
<!doctype html>
<html>
<body>
<head>
<title>TEST</title>
</head>
<link rel="stylesheet" type="text/css" href="Base.css">
<div id="container">
<div id="header">
<a href="/"><img src="myLogo.jpg"></a>
<h2>Ye Olde Soap</h2>
</div>
<div id="topnav-container">
<ul id="topnav">
<li><a href="index.html">Home</a></li>
<li><a href="About Us.html">About Us</a></li>
<li><a href="Contact Us.html">Contact Us</a></li>
<li><a href="Login.html"></a>Login Page</li>
<li><a href="Products.html">Products</a></li>
</ul>
</div>
<div id="content">
<h3></h3>
<p> This is my testing page. Trying to get all this tested and correct</p>
</div>
<div id="footer">
<p><small>Copyright © 2000 Ye Olde Soap</small></p>
</div>
</div>
</body>
</html>
Did you save your image file as myLogo.jpg? 'cause if not you'll need to change the filename in the img src="_____"
I do have it saved as myLogo.jpg
And I have the image saved in my folder Final that holds all my html and css files.
then add the <img .. > tag in your page, like so;
<a href="/"><img src="mylogo.jpg"></a>
That should work.
However, I'd prefer if you created a php file [e.g logo.php] that contains the image; and instead of adding it to each page, you simply include it.
The advantage about this is that, whenever changes are made in dimensions or even name change; you only edit the logo.php file rather than all your pages.
So should I just reopen the file and save it as myLogo.php
What do you extactly mean that it is include. Like it will be on my Bass.css page that I am using to style all my pages?
Is it in the same folder as that of .html file i.e. in the final folder?
If it is in the same folder then it should work.
Otherwise make a new folder & paste all the files there.
This trick works for me sometimes.
I do have it saved as myLogo.jpg
And I have the image saved in my folder Final that holds all my html and css files.
Double-check your capitalization. If that doesn't work, could you take a screenshot of your directory structure? Also, are any of the other images on your page loading?
However, I'd prefer if you created a php file [e.g logo.php] that contains the image; and instead of adding it to each page, you simply include it.
I'm tempted to downvote this post. The suggestion to use PHP is completely unnecessary here. The OP is struggling with basic HTML and CSS (no offense to Ms. Wilkins). Introducing a server-side language will only confuse the matter further; is outside the scope of the OP's assignment; and assumes that the OP has access to a server that offers PHP, which was never even hinted at.
Well it is showing up on my webpage after changing the file to jpeg. Is there any way to have it link to all the pages instead of manually doing it? Sorry for all the questions. I have learned a bit doing google and reading. But this something that isn't even in my html book as far as I can tell.
check w3schools website for background-image property
you can add that in your test.css file in #header
check the website & you will find out what is the use of that & how it is done.
Well Paint does not offer php. And I am not even sure when this assignment is due. The teacher hasn't made an official due date. And he isn't worried about how it looks more of can we do it.
My professor did not saything to me about me being wrong with using the <a href="/"><img src="mylogo.jpg"></a>. I am going to mark this as solved.
you can use <img> alt Tag..with logo..some logo tool available online..it makes your logo more live.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.