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">
Related
I have a problem, when i click run in visiual studio and then i click the button
" [ https://www.coursera.org/learn/duke-programming-web][1] Programming Foundations with JavaScript, HTML and CSS
will the corsera website open. But when i make this in codepen.io for coding,that i click the button, then the website can not open.
Why happend that? `
if i click on the button of visiual studio then the corsera website will open, but if i do that from the website for coding, then corsera will reject it, so the website won't open?
<html>
<head>
<meta charset="UTF-8">
<title>Curriculum Vitae</title>
</head>
<body>
<em><h1><b><p>Curriculum Vitae:</p></b></h1></em>
<br>
<div>
<h3>Photo:</h3>
<img src="https://miro.medium.com/max/1400/1*l2AFc33U7grIeMML0a0unQ.jpeg" width="200px" height="150px">
</div>
<div>
<h3><p>Contact details:</p></h3>
<ul>
<li><h4>Name:   Alex Alex </h4></li>
<li><h4>Email:   example#gmail.com</h4></li>
<li><h4>Mobile number:   005910280000</h4></li>
</ul>
<hr>
<b><h3>Education:</h3></b>
<ol start="10">
<li><h4> 2011-2014   University education</li>
<li><h4> 2008-2011   high school </h4></li>
<li><h4> 2005-2008   Secondary education</h4></li>
<li><h4> 2000-2005   the basic education</h4></li>
</ol>
<hr>
</div>
<div>
<em>Notes:</em>
<div>
<p>For more cv you should to visit this cv-website </p>
</div>
<div>
for more hacks photos cklic the photo
<a href="https://www.shutterstock.com/search/website%2Bhack" target="_Parent">
<img src="https://image.shutterstock.com/image-photo/computer-hacker-cyber-attack-concept-600w-553688845.jpg" alt="Hack Photo" width="25" height="25">
</a>
</div>
</div>
<h2>Button as link</h2>
<p> click the button to see corsera website</p>
<button onclick=" document.location='https://www.coursera.org/learn/duke-programming-web'"> Programming Foundations with JavaScript, HTML and CSS</button>
</body>
</html>
CodePen will render your HTML page within an iFrame.
Some sites will try to block that.
Other links to other sites will work.
Try like a Wikipedia link, for example:
<button onclick="document.location='https://en.wikipedia.org/wiki/Intentionally_blank_page'"> Programming Foundations
with JavaScript, HTML and CSS</button>
It's not your code issue, it's because of codepen. Happy coding!
To elaborate on #foreza's response, the link is working but the site is blocked because of Cross-Origin request sharing (CORS) which you can read about here
In codepen, you're trying to request a site from a different origin and that site blocks cross origin requests.
A site that doesn't block cross origin requests, like wikipedia, will work
or
A site with the same origin (codepen in this case) will also work.
In a codepen:
<button onclick="javascript:document.location='https://codepen.io/gpspake/pen/NWGevvj'"> Programming Foundations with JavaScript, HTML and CSS</button>
Example: https://codepen.io/gpspake/pen/NWGevvj
In codepen, right click and click inspect to open your browser's developer tools, then click on the network tab to see the requests that are being sent when you click the button.
I'm trying to reuse HTML from a previous page and write new content on a new page while still retaining the home button and footer for a portfolio. I copied over the HTML containing my home button and footer and used the same stylesheet. But upon opening up a new page with (mostly) the same content sans the hero and work section, the elements on my page look shifted over slightly to the right.
When I add the content from the landing page onto the new page, this problem goes away and the elements are flushed to the left like I want them. However, when I put in any content that does not contain the hero and work section from the landing page, the problem persists.
I've tried looking into not using margin and instead using positioning but am confused if this is the right direction I should go. I'll add the codepens to compare the two. Hopefully the difference is visible, as I really want to work on the actual content of my portfolio. I appreciate any advice.
My landing page:
<div class="container">
<header>
<h1 class="logo">Ryan M</h1>
</header>
<section class="hero">
<p>Hi, I'm Ryan!</p>
<p>
I'm a recent graduate from UC San Diego, where I received a B.S. in
Human-Computer Interaction. I am currently looking for work so feel
free to send me an email!!
</p>
<p class="social">
<a href="#"
>Resume</a
>
—
<a href="#"
>LinkedIn</a
>
—
<a href="
#">Github</a>
</p>
</section>
<section class="work">
<h2>Work ↓</h2>
<article>
<h3 class="title">KOTX website design</h3>
<h4 class="meta">Jan-Mar 2019</h4>
</article>
</section>
</div>
My new page I'm trying to make
Here is the HTML code :
<!DOCTYPE.html>
<html>
<head>
<title>bob is a big fat baby</title>
</head>
</body>
this is my first webpage
<h1>this is u are bob baby<h1>
<h2>how exciting<h2>
<ol>
<ol>bob is a big fat baby<ol>
<ol> he really needs a life<ol>
<p>spinz.io the very fun game<p>
<p><a href="spinz.io</a></p>
spinz.io a very fun game
<p> please be honest and put in the box yes or no if u are bob baby or not <p>
What is the prbolem in this? When I tried it, all of the text was slanted.
Also, there was no text box.
If there are any other problems, let me know.
Your HTML code is likely slanted because the HTML parser is getting confused. This is because your code contains invalid markup. You can read up on the basics of HTML to learn the required HTML structure, and you can validate that your code correctly follows the structure with the W3 Markup Validator.
Here's a short list of some of the things wrong with the above code:
!DOCTYPE html should have a space rather than a dot.
</body> should be <body> -- the slash denotes that you are closing the tag, and you haven't opened <body> yet.
You need to close (nearly) all tags such as <h1></h1>.
When linking to an external resource (or website), you need to preface the link with the protocol. In this case, that's http://www to link to the full spinz.io with http://www.spinz.io.
You need to close both </body> and </html>.
To help get you started, here's the above code with correct markup:
<!DOCTYPE html>
<html>
<head>
<title>bob is a big fat baby</title>
</head>
<body>
<h1>this is my first webpage</h1>
<h2>this is u are bob baby</h2>
<h2>how exciting</h2>
<ol>
<li>bob is a big fat baby</li>
<li>he really needs a life</li>
<li>spinz.io the very fun game - spinz.io</li>
</ol>
<p>please be honest and put in the box yes or no if u are bob baby or not</p>
</body>
</html>
Hope this helps! :)
Here is my code:
<html>
<head>
<style>
div p h1 {
background-color: red;
}
</style>
</head>
<body>
<div>
<p><h1>hello2</h1></p>
</div>
</body>
</html>
I think thats why:
The <p> tag can only contain inline elements. The header tags are block-level elements, and cannot go inside <p> tags even when you style them to display inline.
This is basic HTML (or any other markup language). You should separate the paragraph, <p></p> from the heading, <h1></h1> element.
If you want to put a sub heading below your main heading, I suggest you do something like
<div>
<h1>Main heading</h1>
<h2>Smaller heading</h2>
<p>Some information or a quote</p>
</div>
It's important to CLOSE the html elements before creating new ones. Unless it's a div, span or section which is meant for gathering topically similar elements.
A lot more could be said, but I suggest you get ahead and read more about HTML and markup language. A good place to start is http://www.w3schools.com/html/html_basic.asp and http://www.w3schools.com/html/html_elements.asp …
If you specifically wonder what elements can be nested inside a paragraph check out the answer on this question: List of HTML5 elements that can be nested inside P element?
Having a H1 element inside a p element is invalid mark-up. When the browser encounters this mark-up, it tries to fix it automatically by moving the H1 outside of the p. Once this has occurred, the selector no longer matches anything.
Use the W3C markup validator to ensure the validity of your document
<div>
<h1>hello2</h1>
<p>im the best</p>
</div>
Because your header is like the title of an article - you don't put the title in a paragraph. Using the <p> tags, you're just writing the content for the article, so you wont be able to style a header tag in a p tag as you will most likely be styling your header and content differently
If you are having issue with HTML Structure See the Lynda HTML5 course really worth Your Time It Clarifies how to structure your document. Along with reasons why. You will have a better understanding of What is Style and what is structure which most people struggle with I would include myself.
Also has links to the official web standards "World Wide Web Consortium", Yes I know it's a paid for service but it help me avoid or understand why HTML and CSS react the way it does when you move element in to invalid place.
Understand that h1-h6 Tag are not meant for styling as I previously thought from my earlier days in HTML. Yes we used them because it seemed to make since or easyer to target with CSS. But the h1-h6 are more to structure of importance off the section or content on the page. I would use a div if it's or a span or Bold tag.
Great resource is developer.mozilla.org
https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure
Here is a good example: Of structure from the link above!
<body>
<!-- Main header used across all the pages website -->
<header>
<h1>Header</h1>
</header>
<nav>
<ul>
<li>Home</li>
</ul>
<form>
<input type="search" name="q" placeholder="Search query">
<input type="submit" value="Go!">
</form>
</nav>
<!-- Here is our page's main content -->
<main>
<!-- It contains an article -->
<article>
<!-----------***** As you can see the h1-h6 is for structure not style****** -->
<h2>Article heading Rank2</h2>
<p>This is Paragraph</p>
<h3>subsection Rank3</h3>
<p>This is Paragraph </p>
<p>This is Paragraph </p>
<h4>Another subsection Ranked</h4>
<p>This is Paragraph </p>
<h3>Another subsection Ranked</h3>
<p>This is Paragraph </p>
<p>This is Paragraph </p>
</article>
<aside>
<h2>Related</h2>
<ul>
<li>beside the seaside</li>
<li>beside the sea</li>
</ul>
</aside>
</main>
<!-- main footer that is used across all the pages of site -->
<footer>
<p>©Copyright 2050 by nobody. All rights reversed.</p>
</footer>
But really Check out the Lynda HTML 5 Essentials Tutorials!
When a document it's structured correctly it's readable and more applications and devices. Like Readers.
I have a sidebar with latest news and random blog posts etc
<nav id="sidebar">
<section id="latest_news">
<h1>
Latest News
</h1>
<h2>
News Item 1
</h2>
<p>
Truncated text from the news item in question
</p>
View all news items
</section>
<section id="random_blog_post">
<h1>
Random Blog Post
</h1>
<h2>
Blog Post 1
</h2>
<p>
Truncated text from the random blog post in question
</p>
View all blog posts
</section>
</nav>
As you can see, I've got sections, h1's and paragraphs inside my nav.
I'm just wondering if this allowed or considered good practice. Is there a better more semantic (or less) approach to marking-up and structuring such sidebar content?
Yes, this appears to be pretty valid html5. w3org have an example of navigation with h1 tags in it.
Yes, you can do that, as also denoted in the spec
Quotes specifically relevant to your question:
The nav element represents a section
of a page that links to other pages or
to parts within the page: a section
with navigation links.
and
A nav element doesn't have to contain a list, it can contain other kinds of content as well. In this navigation block, links are provided in prose:
<nav>
<h1>Navigation</h1>
<p>You are on my home page. To the north lies <a href="/blog">my
blog</a>, from whence the sounds of battle can be heard. To the east
you can see a large mountain, upon which many school papers are littered. Far up thus mountain
you can spy a little figure who appears to be me, desperately
scribbling a thesis.</p>
<p>To the west are several exits. One fun-looking exit is labeled "games". Another more
boring-looking exit is labeled ISP™.</p>
<p>To the south lies a dark and dank <a href="/about">contacts
page</a>. Cobwebs cover its disused entrance, and at one point you
see a rat run quickly out of the page.</p>
</nav>
Actually, you could even write an h1 element as a direct child of the nav element so that the nav element would be named in the document's outline.
I suggest this reading about the importance of headings and document's outline:
http://dev.w3.org/html5/spec-author-view/headings-and-sections.html#outline
You can check your document's outline with this on-line tool:
http://gsnedders.html5.org/outliner/
Regards.