Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2019
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Newbie Coder: Cannot get images to appear

    Code:
    <!DOCTYPE html>
    <html>
    <body>
    <p>Ketogenic diets have been all the rage with people everywhere sharing success stories about how much weight they’ve lost and energy they’ve gained. However, following a keto diet, or any diet, can be difficult if you’re always hungry. That’s where beef jerky comes in!</p>
    <img src=“https://media1.tenor.com/images/585bedc861962b363a4dbd0bf6c90d64/tenor.gif?itemid=11760671” alt=“” style="width:500px;heigth:600px"><figcaption><a href=“https://www.medicalnewstoday.com/articles/323345.php”>Medical News Today</a></figcaption>
    <h2 style="text-align:center;">The Basics of Keto</h2>
    <h3 style="text-align:center;">Keto diets follow a pretty simple set of rules:</h3> 
    <ol type=“1”>
    <li><b>No Carbs</b></li>
    <ul style=“list-style-type:circle”>
    <li>Steer clear of <a href=“http://time.com/96626/6-facts-about-saturated-fat-that-will-astound-you/”>breads, pastas, and (of course) sugar</a> if you’re planning on following a keto diet. Yes, this includes potatoes, in any form.</li> 
    </ul>
    <li><b>Fats, Fats, and More Fats</b></li>
    <ul style=“list-style-type:circle”>
    <li>The goal of a ketogenic diet is to encourage your body to burn fat for fuel instead of its usual source, carbohydrates. To do this, you’ve got to eat plenty of fats, and <a href=“https://urbanremedy.com/fats-real-skinny-healthy-fats-harmful-fats/”>not just one specific type</a>. Make sure to take in plenty of monounsaturated and saturated fats to help your body be in tip-top condition.</li>
    </ul>
    <li><b>Protein is King</b></li>
    <ul style=“list-style-type:circle”>
    <li>Protein helps you stay full longer, build muscle, and keeps your body functioning in so many different ways. For a solid keto diet, make sure to include plenty of protein along with fats.</li>
    </ul>
    <li><b>Veggies, and Loads of Them</b></li>
    	<ul style=“list-style-type:circle”>
    <li>You can never have too many veggies! When you’re making meals, make them colorful. Add dark, leafy greens, carrots, and radishes to your diet to brighten your plate and get more nutrients.</li> 
    <h2 style="text-align:center;">Snacking Keto Style: Beef Jerky</h2>
    <img src=“https://www.smokehousebayou.com/Pix/Products/L_hickory.jpg” alt=“Hickory Smoked Beef Jerky”>
    <p>Sticking to a ketogenic diet doesn’t have to be difficult or boring. With a bag of <a href=“https://smokehousebayou.com/SmokeHouse_ViewProduct.asp?PID=2”>Smoked Hickory Beef Jerky</a> in hand, you’re sure to be smiling. As an added bonus, snacking on a <a href=“https://smokehousebayou.com/SmokeHouse_Shop.asp?v=All”>bag</a> comes with benefits:</p>
    	<ul style= “list-type-style:circle”>
    <li><b>High in protein</b> with nearly <b>10 grams</b> <a href= “https://limitlesslyfit.com/benefits-of-jerky/”>per ounce</a>.</li>
    <li><b>Heaps of healthy fats</b> with most beef jerky containing about <b>7 grams in total</b> (<a href=“https://www.livestrong.com/article/416578-is-beef-jerky-healthy/”>a mix of both monounsaturated and saturated</a>).</li> 
    <li><b>Keeps you full, longer!</b></li> 
    <p>While everyone might not be a fan of beef jerky, there’s no argument when it comes to the benefits you can get from snacking on a delicious bag of beef jerky. Chew on some <a href=“https://smokehousebayou.com/SmokeHouse_ViewProduct.asp?PID=3”>Smoked Chipotle Beef Jerky</a> while sticking to your diet. Your taste buds will thank you.</p>
    </body>
    </html>

  2. #2
    Senior Coder benanamen's Avatar
    Join Date
    Oct 2015
    Posts
    1,581
    Thanks
    10
    Thanked 160 Times in 155 Posts
    You need to use regular straight quotes.
    Last edited by benanamen; Jan 10th, 2019 at 01:55 AM.
    To save time, lets just assume I am almost never wrong.

    The XY Problem
    The XY problem is asking about your attempted solution (X) rather than your actual problem (Y). This leads to enormous amounts of wasted time and energy, both on the part of people asking for help, and on the part of those providing help.

    Make A Donation https://www.paypal.me/KevinRubio

  3. #3
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,273
    Thanks
    4
    Thanked 476 Times in 464 Posts
    @benanamen has it right that what's biting you in the immediate sense is the styled quotes. It likely means you tried to use a word processor as a code editor, a task for which they are highly unsuited. There's a reason few people write code in M$ Word or LibreOffice.

    Basically this:

    Code:
    <img src=“https://www.smokehousebayou.com/Pix/Products/L_hickory.jpg” alt=“Hickory Smoked Beef Jerky”>
    Needs to be this:

    Code:
    <img src="https://www.smokehousebayou.com/Pix/Products/L_hickory.jpg" alt="Hickory Smoked Beef Jerky">
    Don't worry, yes it's a rookie mistake; but one I think we've all done at some point when starting out. The "auto-formatting" of a word processor will auto-screw code.

    But even with that fixed, you've got major issues in that HTML as it's... well... gibberish. You've missed some fundemental basics in the order in which tags can be put onto a page, what tags are valid inside which other tags, and are likely learning from a horribly outdated source.

    To start with there's no such thing as a "type" attribute. That went the way of the dodo twenty years ago. That's CSS' job. Same goes for your inlined centering with the style="" attribute, which is not good practice.

    This gets worse when we look at how you've placed UL as siblings to LI instead of as children of them. IF we add formatting to a section of your code:

    Code:
    <ol type=“1”>
    	<li><b>No Carbs</b></li>
    	<ul style=“list-style-type:circle”>
    		<li>Steer clear of <a href=“http://time.com/96626/6-facts-about-saturated-fat-that-will-astound-you/”>breads, pastas, and (of course) sugar</a> if you’re planning on following a keto diet. Yes, this includes potatoes, in any form.</li> 
    	</ul>
    	<li><b>Fats, Fats, and More Fats</b></li>
    You can't put a UL between two LI. That's invalid nonsense. It also seems unlikely this should even be an ordered list given you clearly have section headings -- text that should be displayed as numbered headings. Lists -- be they ordered or unordered -- are for short bullet points or selections, not full sections of content that warrant the use of headings. Note that's bullet points in the grammatical sense, not "hurr durz, it has a dot or number before it".

    To that end, whilst it's an older reference for HTML 4, I highly suggest you familiarize yourself with this reference:

    HTML 4 Reference

    It's one of the few that turns the (massively convoluted) HTML specification into plain English. The big parts to pay attention to starting out are the "contained in" and "contents" parts of the spec. For example if we look at OL:

    OL - Ordered List

    We can see it says:

    Contents One or more LI elements

    Contained inAPPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

    Hence you can't put a UL as a direct child of a OL. Only LI can be direct children of OL. If we look at LI:

    Contents Inline elements, block-level elements (except for LIs used within DIR and MENU, which do not allow block-level elements)

    Contained in OL, UL, DIR, MENU

    LI can only go inside those tags, but can contain almost anything. Hence it is acceptable to place a UL inside a LI, which is how more complex menus are built.

    This is another of the things that isn't made entirely clear to beginners, and don't feel bad about not getting it right away. We all made these same mistakes at the start. Even some 'experts' out there, including members of the W3C screw this up from time to time. Look at the 'loosening' of structural rules in HTML 5 and the ensuing mess created by it.

    Likewise, is "No Carbs" a legal entity? The B tag is for when things would be bold for grammatical reasons, and not "this is a heading". Such examples are proper names / company names / entities in a legal document. In that way your use of B in the later LI is equally flawed since "Keeps you full, longer!" isn't such a name/title either -- nor is it a heading. You are applying EMphasis, or more specifically "More emphasis" which is the STRONG tag's job.

    Basically, all but three of the HTML tags that go inside your BODY have meanings. If you choose ANY of your tags based on what you want things to look like, you're choosing all the wrong tags for all the wrong reasons.

    It is also curious you have a FIGURE/FIGCAPTION -- bleeding edge HTML 5 stuff -- mixed with attributes like TYPE that haven't even existed in HTML for two decades. More so since what makes that site logo / text a mathematical or scientific figure? IF anything that should be your H1 with the image applied from your stylesheet.

    Good rule of thumb, if an image is something like your site logo or presentational (part of the template) and not part of the content, it has no business in the HTML as a IMG tag. That's your stylesheet's job.

    Of course if it were your H1, it should be the first content-bearing element meaning the paragraph needs to go after it.

    Remember, unless you use HTML 5's (idiotic halfwitted mentally enfeebled and pointlessly redundant) SECTION tag, the (singular) H1 is the (singular) heading (singular) that all the content on all your pages is a subsection of. Think of it like how in a newspaper or book the name of the document appears at the top of every page or fold-pair. That's the h1's job.

    An H2 means the start of a major subsection of the page, with the first H2 marking the start of the main content. Making HTML 5's MAIN tag a pointless redundancy.. An H3 means the start of a subsection of the H2 before it. H4 is the start of a subsection of the H3 before it, and so forth down the line breaking the page into sections and subsections. Even HR means a change in topic or section where heading text is unwanted or unwarranted. They do not mean "fonts in different weights and sizes" or "draw a line across the screen", that is just their default appearance in most browsers. Many UA's and valid media targets for HTML are incapable of even showing different font sizes or drawing lines (speach, braille, etc) which is why HTML tags were based on professional writing norms.

    Of course if all these tags break the page up into sections or subsections, what's the point of HTML 5's SECTION, ARTICLE, MAIN, ASIDE, HEADER, FOOTER, etc. Just skip past those tags as if they don't exist, it was stupid and ignorant of the WhatWG to add them to the spec.


    It is to that end that your OL really shouldn't be an OL structurally since you have clear headings for them, and the UL inside them have no reason to even be treated as lists.

    If I were writing the same document, the code would -- at least for the semantics -- start out like this:

    Code:
    <!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
    <meta
    	name="viewport"
    	content="width=device-width,height=device-height,initial-scale=1"
    >
    <link
    	rel="stylesheet"
    	href="screen.css"
    	media="screen,projection,tv"
    >
    <title>
    	The Basics of Keto - Medical News Today
    </title>
    </head><body>
    
    	<h1><a href="/">Medical News Today</a></h1>
    	<p>
    		Ketogenic diets have been all the rage with people everywhere sharing success stories about how much weight they’ve lost and energy they’ve gained. However, following a keto diet, or any diet, can be difficult if you’re always hungry. That’s where beef jerky comes in!
    	</p>
    	
    	<h2>The Basics of Keto</h2>
    	<p>
    		Keto diets follow a pretty simple set of rules:
    	</p>
    	
    	<h3>No Carbs</h3>
    	<p>
    		Steer clear of <a href=“http://time.com/96626/6-facts-about-saturated-fat-that-will-astound-you/”>breads, pastas, and (of course) sugar</a> if you’re planning on following a keto diet. Yes, this includes potatoes, in any form.
    	</p>
    	
    	<h3>Fats, Fats, and More Fats</h3>
    	<p>
    		The goal of a ketogenic diet is to encourage your body to burn fat for fuel instead of its usual source, carbohydrates. To do this, you’ve got to eat plenty of fats, and <a href=“https://urbanremedy.com/fats-real-skinny-healthy-fats-harmful-fats/”>not just one specific type</a>. Make sure to take in plenty of monounsaturated and saturated fats to help your body be in tip-top condition.
    	</p>
    	
    	<h3>Protein is King</h3>
    	<p>
    		Protein helps you stay full longer, build muscle, and keeps your body functioning in so many different ways. For a solid keto diet, make sure to include plenty of protein along with fats.
    	</p>
    	
    	<h3>Veggies, and Loads of Them</h3>
    	<p>
    		You can never have too many veggies! When you’re making meals, make them colorful. Add dark, leafy greens, carrots, and radishes to your diet to brighten your plate and get more nutrients.
    	</h3>
    	
    	<h2>Snacking Keto Style: Beef Jerky</h2>
    	<img
    		src=“https://www.smokehousebayou.com/Pix/Products/L_hickory.jpg”
    		alt=“Hickory Smoked Beef Jerky”
    		class="plate"
    	>
    	<p>
    		Sticking to a ketogenic diet doesn’t have to be difficult or boring. With a bag of <a href=“https://smokehousebayou.com/SmokeHouse_ViewProduct.asp?PID=2”>Smoked Hickory Beef Jerky</a> in hand, you’re sure to be smiling. As an added bonus, snacking on a <a href=“https://smokehousebayou.com/SmokeHouse_Shop.asp?v=All”>bag</a> comes with benefits:
    	</p>
    	<ul>
    		<li>
    			<strong>High in protein</strong> with nearly <strong>10 grams</strong> <a href= “https://limitlesslyfit.com/benefits-of-jerky/”>per ounce</a>.
    		</li><li>
    			<strong>Heaps of healthy fats</strong> with most beef jerky containing about <strong>7 grams in total</strong> (<a href=“https://www.livestrong.com/article/416578-is-beef-jerky-healthy/”>a mix of both monounsaturated and saturated</a>).
    		</li><li>
    			<strong>Keeps you full, longer!</strong>
    		</li> 
    	</ul>
    	<p>
    		While everyone might not be a fan of beef jerky, there’s no argument when it comes to the benefits you can get from snacking on a delicious bag of beef jerky. Chew on some <a href=“https://smokehousebayou.com/SmokeHouse_ViewProduct.asp?PID=3”>Smoked Chipotle Beef Jerky</a> while sticking to your diet. Your taste buds will thank you.
    	</p>
    	
    </body></html>
    The various sections and subsections MAY get DIV (a semantically neutral / meaningless block level container used to say "this might get style" without saying what that style is) applied to them to group them for styling, but apart from that everything else you're trying to do with this belongs in the external stylesheet.

    Hope that helps you understand it a bit more -- you've got problems, but nothing insurmountable. Good luck on the path.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •