I am a newbie in coding and I try to find out what makes my HTML images idle?
Can you have a look for this?
<p> My Most Favorite Plantnete - Uranus
img src "Uranus2.png" alt "Uranus" id "Pic3"
</p>
You need to edit this into:
<p>My Most Favorite Planet - Uranus
<img src="Uranus2.png" alt="Uranus" id="Pic3">
</p>
Related
A little background about what I am trying to do— As of recent I have started to read Jon Ducketts “HTML&CSS” book which I am enjoying thoroughly. I finished HTML and now am beginning the CSS side of the book.
What I am trying to accomplish is making a website that shows everything the book has covered and essentially have a navigation bar to give users easier access to go throughout my website to learn about topics that are not yet clear to them (myself).
The problem is that while I am trying to style my text color it isn’t changing color and for the life of me I cannot figure out why.
Is the problem within my link with the wrong file paths I specified in the head or is it a problem with how I have my classes set up in HTML and CSS?
My CSS code is at the bottom of the page that I tried to create classes with. Since you need a “10 reputation” to post photos I’ll be writing my HTML / CSS file name and folder path here.
Name- newWebsiteFinalCSS.css
Folder Path- C:\Users\MyName\Desktop\Website
Name- newWebsiteFinal.html
Folder Path- C:\Users\MyName\Desktop\Website
.headingcolors {
color: red;
}
.p {
color: red;
}
<!doctype>
<html>
<head>
<title>Final HTML CSS Website</title>
<link type="text/css" href="Website/newWebsiteFinalCSS.css" rel="stylesheet">
</head>
<!-- This section i want to create a link to different topics within my own website so it is easier to go throughout the site and
only look at things you want to be reasearching about if you come across a problem with a topic about HTML or CSS. -->
<header class="topnav">
Home
Text
Lists
Links
Images
Tables
Forms
Extra Markup
</header>
<!-- insert navigation bar here -->
<body>
<h1 id="top" class="headingcolors"> Welcome to my first Web Page created with HTML & CSS </h1>
<p>//// During the process of making this website, I will be showing you how I learned to do simple webpage making with very easy to understand the code. This code includes languages called HyperText Markup Language (otherwise known as HTML), and a styling
language called Cascading Style Sheets (otherwise known as CSS). This website was made possible by reading a book called <i>HTML&CSS; design
and build websites</i> by Jon Duckett. I am a fan of Jon Duckett's book and it made me feel excited to read something that was so interesting and brought color to such a fundamental topic of learning a computer language. This website will be a work in
progress with perfecting every single topic covered in HTML as well as styling my webpage and making it a professional looking website that any CEO or businessman would be interested in reading. I hope you enjoy browsing casually throughout my website and enjoying some of the topics as much as I did learning about them! ////</p>
<h2 id="text" class="p">Texts</h2>
<p>This is some text, hopefully i can figure out how to add color.</p>
<br>
<br>
<br>
<br>
<br>
<br>
<h3 id="lists" class="p">Lists</h3>
<p>This is some text, hopefully i can figure out how to add color.</p>
<br>
<br>
<br>
<br>
<br>
<br>
<h4 id="links" class="p">Links</h4>
<p>This is some text, hopefully i can figure out how to add color.</p>
<br>
<br>
<br>
<br>
<br>
<br>
<h5 id="images" class="p">Images</h5>
<p>This is some text, hopefully i can figure out how to add color.</p>
<br>
<br>
<br>
<br>
<br>
<br>
<h6 id="tables" class="p">Tables</h6>
<p>This is some text, hopefully i can figure out how to add color.</p>
<br>
<br>
<br>
<br>
<br>
<br>
<h7 id="forms" class="p">Forms</h7>
<p>This is some text, hopefully i can figure out how to add color.</p>
<br>
<br>
<br>
<br>
<br>
<br>
<h8 id="extramarkup" class="p">Extra Markup</h8>
<p>This is some text, hopefully i can figure out how to add color.</p>
Top of Webpage
</body>
</html>
<link type="text/css" href="Website/newWebsiteFinalCSS.css" rel="stylesheet">
is relative to the html file.
If the html file is in C:\Users\MyName\Desktop\Website.
Then the link is pointing at C:\users\MyName\Desktop\website\Website\newWebsiteFinalCSS.css
It should be
<link type="text/css" href="newWebsiteFinalCSS.css" rel="stylesheet">
I added some images to my website and the colors in them faded out.
here is the section where I am adding one of the images in the HTML
<section id="two" class="spotlight style2 right">
<div class="image fit main"><img src="images/1111.jpg" alt="" /></div>
<div class="content">
<header>
<h2>Courses & Projects</h2>
<p>For Adults and Students</p>
</header>
<p>Robone team developed their own educational curriculum based on studying students’ behavior, especially students’ stress arousals and their effects on students’ understanding.</p>
<p>One of the most unique factors of Robone is their curriculum, which is updated quarterly based on technology updates and facilities.</p>
<p>. Moreover, Robone team design their curriculum based on a combination between international advanced course text books and elementary courses.</p>
<ul class="actions">
<li>Learn More</li>
</ul>
</div>
Next
</section>
I tried using different extensions of the image (.jpg, .jpeg, .png) but still the colors fade out.
I would comment rather than answer, but I don't have enough 'reputation'...
Try looking at style definition for .image and see if there's an opacity setting less than value of 1.
I can only guess without CSS to look at.
The problem you are (probably) facing is that your image has a (not supported) color profile. You should first convert your image to a sRGB image (safe RGB) in Photoshop or a similar program. You might experience the same 'fading' while converting. When you correct that and save as sRGB your image will show up exactly as intended. Any other color profile suffers from interpretation errors by your webbrowser/computer/device (this is partly why 'Save For Web' is invented).
sRGB: the color profile used by most web browsers to display images on the web.
Some background info, and
some more...
<p class="reportproblems">
To report problems or comments with this site, please contact
business#business.com.
<br>© Business LTD. All Rights Reserved.
</p>
As above, I have tag in my HTML code, but when I open the page in the web browser, I get an unknown symbol "Â", before the "©" symbol.
Is there any way to fix the glitch ?
edit:
All the HTML content is coming from a third party server, hence, editing the content will not be possible. Management of everything using CSS, or CSS over rides, is necessary.
You can use one of the following three methods
HTML Symbols
<p> ©</p>
<p> ©</p>
<p> ©</p>
Hi have the code where i whrite the code inside the Text area to get the format like below.But my problem is the text is format correctly and how i can place the same text format inside the textarea.
<input type="textarea">
<P align = center>
<B>About Salman Khan </B>
</P>
<P align = left>Salman Khan (pronunciation born Abdul Rashid Salim Salman Khan on 27 December 1965)[5] is an INDIAN film actor and producer. He is cited in the media as one of the most commercially successful actors of Hindi cinema.
</P>
<P>
<ul>
<li>Undertake our tasks and activities in utmost good faith, objectivity, transparency, competence, due care and professionalism.</li>
<li>Abide by the highest standards of politeness and good conduct.</li>
</ul>
</P>
</input>
Sorry, you can't style a textarea. However it does seem like there are some workarounds available. Here's the first thing I found:
Format text in a <textarea>?
So basically you put all your content in a div and style it to make it work like a text area. Here you can see I've made it scrollable, made it editable, plus setting the height/width and borders. (There don't need to be set, depending on exactly what you want.) I think the biggest problem here is that different browsers style text areas differently so there probably is no really easy to way style it so it looks exactly like a native textarea in all browsers.
<div id='fake_textarea' style="overflow:scroll; height:100px; width:400px; border:solid; border-width:1px" contenteditable>
<P align=center>
<B>About Salman Khan </B>
</P>
<P align=left>
Salman Khan (pronunciation born Abdul Rashid Salim Salman Khan on 27 December 1965)[5] is an INDIAN film actor and producer. He is cited in the media as one of the most commercially successful actors of Hindi cinema.
</P>
<P>
<ul>
<li>Undertake our tasks and activities in utmost good faith, objectivity, transparency, competence, due care and professionalism.</li>
<li>Abide by the highest standards of politeness and good conduct.</li>
</ul>
</P>
</div>
Notice that this the same as your code, except I replaced the input tag with a styled div.
See the posts in the above answer if you need to be use this field in a form and must submit the contents. It takes a minor work around.
Apologies if this is a really simple thing, I can't seem to get it. Think I need to use clear but it's not working right (or I'm not using it correctly).
Am doing a pretty simple page, floating one image logo left and text on right. Then using a line break to break up image / text (you can see example here: http://transitions-london.co.uk/index.php/testimonials
It looks fine on firefox, but move to safari or chrome and the formatting is shunting some images/text to the right. Also when you scale up or down (cmd +-) the formatting changes.
I think I need to use <div style="clear: both;"> after every <hr /> but when I do nothing happens and the Joomla editor removes the code after saving.
Each testimonials (chunk of logo then text) is currently coded like so:
<div style="float: left;"><img src="images/otherlogos/nationalgrid92.png" border="1" alt="National Grid" width="92" height="92" style="padding: 20px;" /></div>
<p>"Transitions opens up an avenue for us to recruit a diverse graduate workforce. There's an option for recruiting to more experienced roles too. There's a real demand in the UK for highly skilled candidates in cables and tunnels and this presents a real alternative to find international people without the complexities around international recruitment. Some of these people may have experience in their home country that we just don't have here. If the requirements change quickly we can now respond quickly."</p>
<h5 style="text-align: right;">Sharon Goymer, Graduate Resourcing Manager, Development Programmes, National Grid</h5>
<hr />
<div style="float: left;"><img src="images/otherlogos/crossrail92.png" border="1" alt="National Grid" width="92" height="92" style="padding: 20px;" /></div>
<p>“We gained a first-class civil engineer employee as a result of Transitions. The internship and recruitment service and candidate was above our expectations.. The refugee community offers a good untapped market.“</p>
<p> </p>
<p> </p>
<h5 style="text-align: right;">Dawn Barker, Crossrail Head of HR, Crossrail</h5>
<hr />
Would really appreciate the help. I know it's probably very simple.
Cheers, N
Your template already has a class clr you can use. Try adding it to your <hr> element like so:
<hr class="clr">
If that continues to be stripped out by the Joomla WYSIWYG Editor, then add this to one of your Joomla CSS files
hr {clear: both}