I'm trying to set up Google Sites for my own personal website:
<html>
<head>
<title>...</title>
</head>
<body background="page_bg.png" text="#000000" bgcolor="#333333">
<div align="center"><img src="content.jpg" border="0" alt=""></div>
</body>
</html>
So all I want is a background picture (I accomplished to do this under settings) and only one picture in the middle of the site itself. I was trying to get rid of all the gimmicks (such as the sidebar, shadows of the frame, etc.) but I failed. Is it even possible to do this?
The reason I use Sites is, because the web address "https://sites.google.com/site/my_name_here/" is clear, it's free and it makes my site appear in the google search.
edit, my solution: I found a template called "Blank Template (Black)" which didn't contain anything (no sidebar, etc). I added my own background picture, inserted my content.jpg and done.
I guess you have to use something like:
<body style="background:#333333 url('page_bg.png'); color=#000000;">
<div style="text-align:center;"><img src="content.jpg" border="0" alt=""></div>
</body>
Oh ok, right! I think you cannot add your own styles using html/css. But if you go to "Managing Web site" there is a "Colors and fonts" option, and there you make you own customization for some elements, like select a different background color.
Is that what you're looking for Thomas?
My solution: I found a template called "Blank Template (Black)" which didn't contain anything (no sidebar, etc). I added my own background picture, inserted my content.jpg and done.
Related
I'm an absolute beginner in coding. In fact, I'll probably never do it again ;)
I'm trying to create this very simple website for my boyfriend as a surprise (he's a developer). And now I'm just encountering one problem after the other :(
I've decided on html (although I'm so desperate by now that I'd be willing to go with anything).
<!DOCTYPE html>
<html>
<body>
<h1>Hello, world (especially Mitchell)</h1>
<h2>I want to show you something…</h2>
<p>Remember that time when I was losing so many rounds of Quizduell that even you noticed? Well, turns out I was doing that on purpose. I was trying to spell something out for you. But as I found out the hard way, it is actually really hard to lose specific games on purpose in the exact order you need. It seemed like I needed to change my plans…</p>
<img src=“7.JPG” alt=“error” style="width:304px;height:228px;">
This is all I have so far. And it's just going to be a bit more text, a couple more images and maybe a little bit of colour and layout (if I can manage that).
Right now my biggest problem is inserting the images.
It just doesn't work :(
Can someone please help me?
You have to close all of your tags. You see the and tags, etc.? All of those tags with /'s before them are the end of a section. First of all, you need that for your <html> and <body> tags. You also need it on your image tag, but there is a special way to do so for such tags as images. Simply add a space followed by a slash at the end of the angled brackets of the image tag:
<img src=“7.JPG” alt=“error” style="width:304px;height:228px;" />
This basically allows the tag to be on one line, making code simpler.
Good job on your project so far, and good luck!
Fixed version of your code:
<!DOCTYPE html>
<html>
<body>
<h1>Hello, world (especially Mitchell)</h1>
<h2>I want to show you something…</h2>
<p>Remember that time when I was losing so many rounds of Quizduell that even you noticed? Well, turns out I was doing that on purpose. I was trying to spell something out for you. But as I found out the hard way, it is actually really hard to lose specific games on purpose in the exact order you need. It seemed like I needed to change my plans…</p>
<img src=“7.JPG” alt=“error” style="width:304px;height:228px;" />
</body>
</html>
`
In case this doesn't work, make sure 7.JPG is in the directory of the .html file. The filename is case-sensitive.
First of all, I thought that it was very sweet of you to do that!
Here is a sample html that might help you out.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="./promo_5.png" alt="Describe my picture here!" />
</body>
</html>
The body and the html is wrapped here, and the image src is using relative path to find the image.
How sweet!
I would suggest you to use a WYSIWYG (What You See Is What You Get) editor to design like Microsoft Word. After you are done with the design, go to tools > source code. There you can get the html code for your design. Simply copy the code from there and paste it within the <body></body> tag. And done! You have designed the webpage!
Link to a WYSIWYG Editor: click here
For image issues, make sure that they are placed in the same directory where the .html file is kept. It should work properly.
I have image with phone number on it:
I want to let other people find the page where this image is, by searching "1-700-700-690" on Google. Just as if the HTML tag would be:
<div> 1-700-700-690 </div>
I tried:
<img alt="1-700-700-690" src="http://hashef.co.il/wp-content/uploads/2013/12/Moked-Telephoni2.png" width="295" height="62" />
But it doesn't work (tried find the page on Google).
Is there anyway to do this?
One of these two workarounds might work for you:
1) Place <p>1-700-700-690</p> directly before or after your image and set font-size to 1px and change the font color to the background color.
2) Use <meta> tags in your head that include the phone number. This should help with the indexing of your page. Documentation can be found directly on Google, e.g. see this link here.
I need some help here.
I found the "Miniport" template by "html5up" and I want to use this template as a base for my future projetc.
The demo can be seen here: http://html5up.net/miniport
On the demo we can see that bellow the website menu is an circular image and next to it is some texts. I need to know how to remove that image and center the texts so the texts can match the rest of the template (the site has the divs centered too).
I dont have much skills on css nor html5. Im a fan and I want to learn.
If anybode can help me, please..
Sorry about my english.
I too am using this template.
In order to remove the image, open the html document.
Delete this code that is found between ~line 42—46: (this is what formats and holds your image)
<article class="container" id="top">
<div class="row">
<div class="4u">
<span class="image fit"><img src="images/angela.jpg" alt="" width="118%" height="350" /></span>
</div>
Reformat the div tag:
<div class="8u"> to <div class="container" align="center">
By doing this, you are modifying the style within the html document rather than the css doc. This is good since you do not want to change every div tag in the html doc, just this one. Additionally, adding align="center" helps override most css formatting within your divs. You can use that trick later on in your site.
On a side note, double check that you like the command the contact form uses. I do not, since it opens up my computer's email app rather than directly sending the email through the webpage. That's my next project.
Enjoy!
What do I have to do to get my images to show up on my webpage. I am trying to put the images in my html document. The box shows up but not the image. This the code <img scr="smile.jpg" width="120" height="90"/> I have not put the web page on the internet yet.
<HTML>
<HEAD>
<TITLE> Tay first Web page </TITLE>
</HEAD>
<BODY>
<H1 ALIGN="center"> Why do I want to learn to code? </H1>
<P> I want to learn to code because it will help me develop the skills I need in web development and game development. My goal is to learn how to code in many different languages. It is amazing to me to be able to create something from scratch and making it into your vision.</P>
<H2 ALIGN="center"> Why is coding fun? </H2>
<P> Computer coding is <STRONG> wonderful.</STRONG> You get to make a web page with whatever info you want and add so many things to it to make it mind blowing.There are colours, images, flash, and you can even make a video game if you wanted too. The possibilities are endless and mind blowing.</P>
<H3 ALIGN="center"> How can coding be important in the real world? </H3>
<P> <EM>Technology</EM> is everywhere and is constantly changing. <MARK>Computers</MARK> are so intertwined in our lives. People view web pages all the time and are looking at code everyday. Being able to code can get you a job if you are efficient with different languages.
<P><STRONG>These are the best consoles ever!!!!</STRONG></P>
<UL>
<LI>N64</LI>
<LI>SEGA GENESIS</LI>
<LI>XBOX</LI>
<LI>XBOX 360</LI>
</UL>
<TABLE BORDER="1">
<TR><TD>First</TD></TR>
<TR><TD>Second</TD></TR>
<TR><TD>Third</TD></TR>
</TABLE>
<IMG SRC="smile.jpg" WIDTH="120" HEIGHT="90"/>
</BODY>
</HTML>
You have to spell src correctly (SouRCe). You have two of its letters reversed.
This would have been picked up if you had performed some basic automated QA by using a validator.
your img tag was wrong,it should be
<img src="smile.jpg" width="120" height="90"/>
Check the following:
Could your image possibly be in another folder than your your file?
Could there be other divs or elements on the page that might be "on top" of your image?
Could your layout place things "off-screen"?
Could there be code that sets something to visibility: none?
Could you have spelled the filename of the image wrong?
Are you absolutely certain you force refresh your browser window when trying to load again?
Please give us the entire code; preferably as a JS-fiddle.
If you're looking to find it on a Linux server, the file name is case-sensitive. If you set it up and tested it and found that it tests fine on a Windows system, you will perhaps not have noticed that smile.JPG and SMILE.jpg and Smile.jpg will all be treated as though they're the same thing as smile.jpg. On a Linux host, if you call for smile.jpg and it's been stored as smile.JPG (for example), you'll get the result you're observing.
Width and Height attributes should have units. You want them in pixels?
Try this:
<img src="smile.jpg" width="120px" height="90px"/>
I am making a website and I want to make it so that if you click on a button at the bottom of the page you go to a new .html file with a different layout, but I want it to look like that new page is sliding up so that it looks like a cool transition.
Here is an example:
<!DOCTYPE html>
<html>
<body>
<p>Create a link of an image:
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" width="32" height="32">
</a>
</p>
<p>No border around the image, but still a link:
<a href="default.asp">
<img border="0" src="smiley.gif" alt="HTML tutorial" width="32" height="32">
</a>
</p>
</body>
</html>
I need it to be so that when you click on the picture it goes to a new page, but when it goes to that new page there is a "sliding up" transition.
Thanks!
You can use an iFrame to accomplish this:
JS Fiddle Demo
I used jQuery Transit for the transition effects:
$("#myLink").click(function () {
$('#newPage').transition({top: '0%' });
});
I am not sure if it is possible for standard navigation.
Some options that should be possible:
Use JavaScript to navigate (either by putting all on the same page or through AJAX)
Put everything on the same page and use :target and CSS transitions
For option 1 you can still have reasonable URLs in the browser if you use the history API.
I've had success using something like this: http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/
The only issue is that you may see a brief flash of the new page, which will then disappear, and then be transitioned in. This is more or less unavoidable without using iframes or something similar (something I'm generally loathe to do).
You could also try implementing something like a vertical slider , much like the coda slider but this one is developed for vertical scrolling. Demo.
I tried making these kind of transitions full page and found it difficult. (But I'm a JQ N00B)
Magic slider Offers horizontal and vertical scrolling and could be easier to implement.
Also have a look at this (tutorial here) which might be a simple solution to what you need.
Actually I think this last one is the closet to what you want