1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

I am looking for a HTML Code Line

Discussion in 'HTML & Website Design' started by rhoniedotcom, Jan 28, 2019.

  1. #1
    I am working on a Template and need to know how to put in some HTML code to automate it to make it easy to use.
    I am posting the the entire source code below. Scroll to the bottom of the code, or you can cut and paste it to most HTML editors. Or you can go to Rhonie.com/Example.html to look at it.
    I am sure there must be an HTML line to do what I want?
    <html>
    <head>
      <meta content="text/html; charset=ISO-8859-1"
    http-equiv="content-type">
      <title>Template For DVD</title>
    </head>
    <body>
    <br>
    <br>
    <div style="text-align: center;"><big
    style="color: rgb(51, 204, 0);"><big><big><big><big><big><span
    style="font-weight: bold;">Rhonie.com</span></big></big></big></big></big></big><br>
    <br>
    <table
    style="text-align: left; width: 976px; height: 48px; color: rgb(255, 0, 0);"
    border="0" cellpadding="2" cellspacing="2">
      <tbody>
        <tr>
          <td style="text-align: center; vertical-align: middle;"><big
    style="font-weight: bold;"><big><big><big>The
    Omen <span style="color: rgb(0, 0, 0);">-</span>
    1976</big></big></big></big></td>
        </tr>
      </tbody>
    </table>
    <br>
    <br>
    <br>
    <table style="text-align: left; width: 976px; height: 257px;"
    border="0" cellpadding="2" cellspacing="2">
      <tbody>
        <tr>
          <td style="text-align: center;"><img
    style="width: 964px; height: 658px;" alt=""
    src="https://c1.staticflickr.com/1/54/378445954_79b179afda_b.jpg"></td>
        </tr>
      </tbody>
    </table>
    <br style="color: rgb(51, 102, 255);">
    <big style="font-weight: bold; color: rgb(51, 102, 255);"><big><span
    style="color: rgb(255, 0, 0);">The
    Omen</span> Trailer from <span style="color: rgb(255, 0, 0);">1976</span></big></big><br>
    <br>
    <table
    style="width: 946px; height: 107px; text-align: left; margin-left: auto; margin-right: auto;"
    border="0" cellpadding="2" cellspacing="2">
      <tbody>
        <tr>
          <td style="text-align: center; vertical-align: middle;"><iframe
    src="https://www.youtube.com/embed/V7CEbd7ffNw"
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen="" frameborder="0" height="315"
    width="560"></iframe></td>
        </tr>
      </tbody>
    </table>
    <br>
    <table style="text-align: left; width: 100%;" border="0"
    cellpadding="2" cellspacing="2">
      <tbody>
        <tr align="center">
          <td>Read the Plot, see&nbsp; and read about the entire
    cast on <a target="_blank"
    href="https://www.imdb.com/title/tt0075005/">IMDB </a></td>
        </tr>
        <tr align="center">
          <td>Read the Plot on <a target="_blank"
    href="https://en.wikipedia.org/wiki/The_Omen">Wikipedia -
    Warning, this Link Contains Spoilers of the Movie.</a> </td>
        </tr>
      </tbody>
    </table>
    <br>
    <table style="text-align: left; width: 212px; height: 32px;"
    border="1" cellpadding="2" cellspacing="2">
      <tbody>
        <tr>
          <td>Item Number: &nbsp;<span
    style="color: rgb(255, 0, 0);">123456789A123</span></td>
        </tr>
      </tbody>
    </table>
    <br>
    <br>
    <br>
    <table style="text-align: left; height: 32px; width: 962px;"
    border="1" cellpadding="2" cellspacing="2">
      <tbody>
        <tr>
          <td style="width: 468px; text-align: center;"><big><big><big><big>Pay
    with Paypal &nbsp;$<span style="color: rgb(255, 0, 0);">3.00</span></big></big></big></big></td>
          <td style="width: 476px;"><big><big><big><big>&nbsp;Click
    here to Buy Now</big></big></big></big></td>
        </tr>
      </tbody>
    </table>
    &lt;/div&gt;<br>
    &lt;/body&gt;<br>
    &lt;/html&gt;<br>
    <br>
    <br>
    <big><big><big><big><big><span
    style="color: rgb(255, 0, 0);">Hide This and Below</span></big></big></big></big></big><br>
    ---------------------------------------------------------------------------------------------------------------------------------------------------------------<br>
    <br>
    <table
    style="text-align: left; height: 32px; width: 960px; margin-left: 0px;"
    border="1" cellpadding="2" cellspacing="2">
      <tbody>
        <tr>
          <td style="width: 192px;">Movie Name</td>
          <td style="width: 692px;">The Omen</td>
          <td style="width: 48px;">=A</td>
        </tr>
        <tr>
          <td style="width: 192px;">Movie Year</td>
          <td style="width: 692px;">1976</td>
          <td style="width: 48px;">=B</td>
        </tr>
        <tr>
          <td style="width: 192px;">Movie DVD Cover Link</td>
          <td style="width: 692px;">https://c1.staticflickr.com/1/54/378445954_79b179afda_b.jpg</td>
          <td style="width: 48px;">=C</td>
        </tr>
        <tr>
          <td style="width: 192px;">Movie YouTube Trailer Link</td>
          <td style="width: 692px;">https://www.youtube.com/embed/V7CEbd7ffNw</td>
          <td style="width: 48px;">=D</td>
        </tr>
        <tr>
          <td style="width: 192px;">Movie IMDB Link</td>
          <td style="width: 692px;">https://www.imdb.com/title/tt0075005/</td>
          <td style="width: 48px;">=E</td>
        </tr>
        <tr>
          <td style="width: 192px;">Movie Wikipedia Link</td>
          <td style="width: 692px;">https://en.wikipedia.org/wiki/The_Omen</td>
          <td style="width: 48px;">=F</td>
        </tr>
        <tr>
          <td style="width: 192px;">Movie DVD Price</td>
          <td style="width: 692px;">3.00</td>
          <td style="width: 48px;">=G</td>
        </tr>
        <tr>
          <td>Item Number</td>
          <td>123456789A123</td>
          <td>=H</td>
        </tr>
      </tbody>
    </table>
    <br>
    <br>
    <table style="text-align: left; width: 613px; height: 32px;"
    border="1" cellpadding="2" cellspacing="2">
      <tbody>
        <tr>
          <td style="background-color: rgb(255, 102, 0); width: 44px;">SAVE</td>
          <td style="width: 549px;">&nbsp; Only allow save
    and end page when all information is in the middle table box above</td>
        </tr>
      </tbody>
    </table>
    <br>
    <br>
    <table style="text-align: left; width: 963px; height: 32px;"
    border="1" cellpadding="2" cellspacing="2">
      <tbody>
        <tr>
          <td style="width: 86px;">Banner 1 &nbsp;</td>
          <td style="width: 776px;"></td>
          <td>=B1</td>
        </tr>
        <tr>
          <td>Banner 2</td>
          <td></td>
          <td>=B2</td>
        </tr>
        <tr>
          <td>Banner 3</td>
          <td></td>
          <td>=B3</td>
        </tr>
      </tbody>
    </table>
    Etc...<br>
    <br>
    <br>
    <div style="text-align: left;">I am looking for some help
    with HTML. &nbsp;I want someone that can code so I can achieve the
    above. &nbsp;I need this simple enough that a child can do it.<br>
    Really I believe this can be accomplished very simply for someone that
    knows how to code HTML?<br>
    If this is completed correctly, this should be able to add to most
    simple HTML editors with inserting some code into the template and
    pasting the script at the bottom of the page to edit the template.<br>
    The flow is that after all of the middle boxes are filled in
    above&nbsp;the "Save" Button that it puts the information into the
    programed template, and puts the code on the page to end it at that
    point. &nbsp;Also, it targets the Banner info on the programed
    template to install them - however, they are not required to be filled
    in. <br>
    When the "Save" button is clicked, all links indicated, and everything
    colored red should be changed to what is in the middle of the edit
    boxes. &nbsp;It also should name the title of the page to (In this
    case - The Omen (1976) -)<br>
    <br>
    The reason I want this done is to bring programming to interest
    children to learn how to design and program web pages. &nbsp;This
    should be a real confidence building exercise for them. &nbsp;If
    this can be done I will be contracting High School Students to build
    the pages. &nbsp;KISS!<br>
    <big style="font-weight: bold; color: rgb(255, 0, 0);">Let
    me know if you are interested in doing this!!!</big><br>
    If you are able to do it, and you design templates, this should be a
    big help in selling them!</div>
    <br>
    <br>
    <br>
    <br>
    <br>
    </div>
    </body>
    </html>
    HTML:
    http://rhonie.com/Example.html
    If you can help me, please respond.
     
    rhoniedotcom, Jan 28, 2019 IP
  2. kennedygitahi

    kennedygitahi Active Member

    Messages:
    32
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    61
    Articles:
    2
    #2
    I think what you are looking for is a JavaScript solution, not an HTML one. I can help with that
     
    kennedygitahi, Jan 28, 2019 IP
  3. rhoniedotcom

    rhoniedotcom Well-Known Member

    Messages:
    259
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #3
    Can it be copied and pasted to the bottom of any template? It is easy to add or subtract from as well?
    Can you post the code on here, or how can I contact you directly?
     
    rhoniedotcom, Jan 28, 2019 IP
  4. rhoniedotcom

    rhoniedotcom Well-Known Member

    Messages:
    259
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #4
    Still waiting for a solution?
     
    rhoniedotcom, Feb 8, 2019 IP
  5. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #5
    Your question isn't clear. Do you mean to use a .css file to do styles separately and not on the page?
     
    qwikad.com, Feb 9, 2019 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #6
    Tables for layout, tables for nothing, static style in the markup, pixel metric layout... that is a laundry list of how NOT to write HTML.

    Do yourself a favor and pitch that entire train wreck in the trash and start over. Whoever made that template is unqualified to write a single line of HTML any time after 1997. Even the first line of code proudly proclaims that. See how it says "transitional"? That literally means "in transition from 1997 to 1998 development practices" and is a crutch for people who couldn't manage to extract their cranium out of the 1990's rectum.
     
    deathshadow, Feb 9, 2019 IP
  7. rhoniedotcom

    rhoniedotcom Well-Known Member

    Messages:
    259
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #7
    Thank you so much for the insult. I see now why you have so many likes etc...
    Maybe simple is the way to go, just maybe?
    Seeing how you are so talented, I guess this antique HTML should be simple for you to figure out to do what I want?
     
    rhoniedotcom, Feb 9, 2019 IP
  8. rhoniedotcom

    rhoniedotcom Well-Known Member

    Messages:
    259
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #8
    Did you go to Rhonie.com/Example.html and look at the page. I suppose that CSS or anything else could be used. However, when the input is saved, it just ends the page above it.
     
    rhoniedotcom, Feb 9, 2019 IP
  9. rhoniedotcom

    rhoniedotcom Well-Known Member

    Messages:
    259
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #9
    Really to me it seems like the coding should be very simple by using a "find and replace" type code within the page?
     
    rhoniedotcom, Feb 9, 2019 IP
  10. mmerlinn

    mmerlinn Prominent Member

    Messages:
    3,197
    Likes Received:
    818
    Best Answers:
    7
    Trophy Points:
    320
    #10
    I am confused. What exactly are you trying to do? I have read and reread your notes over and over, yet cannot for the life of me figure out exactly what you want.

    If it is easy enough for a child to do, then any adult (including you as I am assuming that you are an adult) should be able to do it. So, why don't you do it or get a child to do it? Why come here?

    Also, note the question on the screen shot here >>> http://mmerlinn.com/zzothers/HideThis.JPG

    I tried to upload that screenshot, but the upload failed multiple times.

    Finally, I do not understand why you want to interest children in making webpages using technics over 20 years out of date. Learning site programming using out-of-date methods will frustrate those children as they get older and need to UNLEARN what you are trying to teach them. At worst it could mean those children become adults with a skill set that will PRECLUDE them from getting jobs as website designers.

    Even though @deathshadow gets in your face, you may want to heed what he says as he IS one of the gurus of programming on DP. Can't say I agree with everything he says, BUT he has been paying his bills for DECADES fixing sites cobbled together by incompetent "web designers."
     
    mmerlinn, Feb 9, 2019 IP
  11. rhoniedotcom

    rhoniedotcom Well-Known Member

    Messages:
    259
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #11
    I do not want that part to show, I just want that added to the source code to end the web page. The reason I put that in there is to show that when the save button is pushed at the bottom of the page, that it will insert it.
    I am not someone that has coded web pages, but I am someone that has worked in and owned a few computer stores. I started building computers in 1991. I do not build them any longer because to do so is not worth the time it takes.
    Now, with this being said, and me having stockpile of cables around, I decided I may want to open up a store that sells computer/TV cables etc... along with DVD's. I do not have the time to set an add DVD's to a website, so what I want to do is to contract that out, and to High School Students. This way it is cheap for me to do, and who knows, they just might learn something while making a few bucks here and there. And just maybe that if they start with something super simple, it may stimulate their minds to dig in and get more advanced.
    Listen, I live in small town USA and you cannot even find a coder in the entire town in which I live. The only ones that are here work for banks, large corporations, and they are IT people. I doubt if any of those are capable of even coding a web page. (Matter of fact, I know this).
    All needs to happen is that I am looking for someone to tell me how to do the code? I know it is simpler to do than make an Android App? All that needs to be is that the page is coded to support it, and that the code can be copied and pasted to the bottom of the page in a simple HTML editor.
    When the save button is pressed at the bottom, everything is basically "Find and Replace".
    If the boxes at the bottom remain on the page I will just simply cut the page at the top were there coding stops.
    Here I found this line of code just a few minutes ago. Maybe it will help you understand?

    jQuery(function () { jQuery(":contains(FIND)").not(":has:)contains(FIND))").each(function () { var that = $(this), html = that.html(); html = html.replace(/(\(FIND:.*?\))/g, "REPLACE-WITH"); that.html(html); }); });
     
    rhoniedotcom, Feb 9, 2019 IP
  12. rhoniedotcom

    rhoniedotcom Well-Known Member

    Messages:
    259
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #12
    You know in the past I have spent a few thousand dollars running contest and paying web developers to do work for me, in which was never completed. You can see an example of it here (Rhonie.US) I will be 62 years old next week and I had a brain tumor removed about 10 years ago, so my mind is not is complete is it used to be. When the brain tumor was removed, I was trying to learn PHP at that time. It is just too much now, so I have to keep things very simple.
    I paid the winners of the contest I ran, but the owners of DPF wanted to charge me to become a member, and when that happened I just stopped. I wasn't going to pay someone to pay someone money. For that reason is why you see "Well Known Member".
     
    rhoniedotcom, Feb 9, 2019 IP
  13. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #13
    ... and you don't HAVE simple. The outdated outmoded code you are using is more complex than it needs to be, since most of that markup is unnecessary, wasteful, and just plain wrong.

    Thing is your question:

    Doesn't actually say what it is you want... UNLESS what you are asking for -- given the data presented on that page of yours means -- isn't HTML's job. Are you asking how to make it easier to plug data into that template? If so that's not even HTML's job. That's the job of a server-side language like PHP.

    First, let's fix that markup. This is 2019 not 1998, so none of that presentation -- setting style, text alignment, borders, etc -- belongs in the HTML. The only exception would be frameborder if you really care about IE8/earlier. Once we get the base concept fixed, we can talk about some PHP to reduce plugging stuff in to simple data entry.

    There is no reason for the HTML of that page (assuming everything after the escaped HTML close is just data you wanted us to have access to) to be much more than:

    
    <!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>DVD Title - Site Title</title>
    </head><body>
    
    <div id="top">
    
    	<h1><a href="/">Site Title</a></h1>
    
    	<h2>The Omen - 1976</h2>
    	<img
    		src="https://c1.staticflickr.com/1/54/378445954_79b179afda_b.jpg"
    		alt="DVD cover for 'The Omen'"
    		class="plate"
    	>
    	
    	<h3>
    		The Omen
    		<span>Trailer from</span>
    		1976
    	</h3>
    	<div class="video_16_9">
    		<iframe
    			src="https://www.youtube.com/embed/V7CEbd7ffNw"
    			allowfullscreen="1"
    			frameborder="0"
    		></iframe>
    	<!-- .video_16_9 --></div>
    	
    	<div class="infoLinks">
    		<h3>More Information Available At:</h3>
    		<ul class="infoLinks">
    			<li>
    				<a href="https://www.imdb.com/title/tt0075005/">IMDB</a>
    			</li><li>
    				<a href="https://en.wikipedia.org/wiki/The_Omen">
    					Wikipedia - <strong>Warning, this Link Contains Spoilers of the Movie.</strong>
    				</a>
    			</li>
    		</ul>
    	<!-- .infoLinks --></div>
    
    	<div class="buy">
    		<h3>Purchase Now</h3>
    		Item Number: <strong>123456789A123</strong><br>
    		<a href="#">Click here to buy with Paypal for <strong>$3.00</strong></a>
    	<!-- .buy --></div>
    	
    <!-- #top --></div>
    
    </body></html>
    Code (markup):
    EVERYTHING else belongs in an external stylesheet. I modified a few sections to make more sense from an accessibility/usability/semantic markup standpoint.

    Let's go down the list of the changes:

    DOCTYPE -- This is the modern HTML 5 doctype that all new pages should be built with. Rather than proudly proclaiming "I'm still stuck with the worst practices of HTML 3.2" let's at least try to keep it in this century.

    DT through charset META -- Everything on that first line should if at all possible remain in that order. That's why I put it all on one line as a reminder that nothing should ever be pasted in-between those tags. Likewise I keep </head><body> and </body></html> as single lines so again I don't accidentally paste anything between them. It's just a gentle reminder.

    Viewport META -- this tells mobile browsers we know what we're f***ing doing so PLEASE do not screw with our layout choices too badly.

    Stylesheet LINK -- you want to say what things look like that has ZERO business in your HTML. That's the stylesheet's job. Any style should have an associated MEDIA target so that you aren't doing something stupid like sending your screen layout to print, speech, etc. HTML 5 validation will complain about the inclusion of "projection" and "TV" -- screw that noise. There are plenty of devices still in circulation that will bone the layout if we don't include those two extra settings, such as kiosks and nintendo devices. Realistically the valid media targets should be none of the blasted HTML specification's business!

    TITLE -- the purpose of the title tag is to be used as the text for a link back to the page, and to be shown in the window title / task bar / tab. As such describing the current page first, then a hyphen, then the site name is the most useful format for this. Anyone varying from this pattern is a moron.

    close out head, open up the body.

    DIV#top -- an outer wrapper to which we can apply things like centering and max-width so long lines of text aren't hard to follow. I call it #top so that later on if we wanted to make a href="#top" at the bottom of the page to scroll back to the top it's simple to implement.

    H1 -- If not using HTML 5's (pointlessly idiotically redundant) SECTION tag then THE H1 (singular) is THE heading (singular) that everything on the SITE is a subsection of. This is why grammatically / semantically the site title should be your top-level heading.

    Headings have meanings, structural meanings separate from their default appearance. If you are choosing ANY of your HTML based on what you want things to look like, you've chosen all the wrong tags for all the wrong reasons. THAT IS NOT HTML'S JOB! -- was never supposed to be but the mentally enfeebled halfwitted derpitude that was HTML 3.2 (and by extension 4 tranny) got away from that during Microsoft and Netscape's pissing contest to see who could be the flashiest. We've struggled ever since to drag things back to what they're supposed to be.

    H2 -- the first H2 (or HR) on the page indicates the start of the primary content of the page. In this case, the DVD title. I use the SPAN to mark the text that would have a different appearance without saying what that appearance is. We should be able to intercept that off the parent heading without throwing any classes or style in the markup. SPAN and DIV are both fun tags as they (along with Anchor) are the only HTML tags that are "Semantically neutral" -- they have no grammatical/structural meaning and exist just to say "we MIGHT hook this for style or behavior".

    Any subsequent H2 (or HR) would mark the start of a new major subsection of the page, saying that all the content after it is not part of the section started by the H2 preceeding it.

    H3 -- indicates the start of a subsection of the section started by the H2 before it. In this case we're describing the video.

    DIV.video_16_9 -- this is a cute container trick that will let us make the video scale to our content width whilst maintaining the aspect ratio. You'll see the magic of that when I do the style but for now just know that this wrapper will be used to make the IFRAME inside it "behave".

    IFRAME -- All that stuff you were "allowing" is stuff that really shouldn't be allowed. What the blazes does a youtube video need access to your geolocation data for?

    DIV.infoLinks -- a wrapper for possible style and to use less classes internally on this section.

    H3 -- start a new section, describing the links inside it.

    UL -- You have a list of offsite links containing more information. That's an unordered list's job.

    LI -- list item, a subsection of the UL.

    I put STRONG on the warning since that's what that tag is for. It's the grammatical concept of "more emphasis"... warnings qualify as that.

    DIV.buy -- wrapper for another subsection for using less classes and/or styling hooks.

    H3 -- again start a new grammatical/structural subsection

    The content here doesn't constitute a grammatical paragraph, nor does it really fit any other classical structural classification, so just dump the text in with a line break. I really redid this section's code a good deal as that template was... sloppy? Nonsensical? Gibberish?

    I do use STRONG on the price to call attention to it, again using "more emphasis" to draw it out.

    Close everything out, and it's good to go for receiving style. Oh, and notice my use of closing comments. It's very easy to get "lost" in DIV soup, so saying what you're closing when you close it can be a big help on code clarity. There's a bug where comments between sibling-level tags can cause rendering bugs in older versions of IE and every other blasted release of Firefox (they keep bringing this bug back from the dead) if certain types of layout are involved in the stylesheet. Putting the comment before the closing tag means it can never end up between sibling level elements, preventing ever having to worry about said issue.

    That's the markup... let me get breakfast in me and I'll belt out CSS to go with that.
     
    Last edited: Feb 10, 2019
    deathshadow, Feb 10, 2019 IP
  14. rhoniedotcom

    rhoniedotcom Well-Known Member

    Messages:
    259
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #14
    Thank you. Please contact me when you are done.
     
    rhoniedotcom, Feb 10, 2019 IP
  15. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #15
    Alright, coded the base template, live demo here:

    https://cutcodedown.com/for_others/rhonieDotCom/

    For the CSS follow along with the bouncing ball at:

    https://cutcodedown.com/for_others/rhonieDotCom/screen.css

    The first part is called a "reset" -- The HTML specification does NOT actually say (nor should it) what the default appearance of tags should be, so browser makers are allowed to best interpret the MEANING of the HTML to match the device capabilities or user limitations. Unfortunately when styling for screen media the differences in paddings, margins, borders, and even line-heights can really screw with you... so we 'reset' them all to a uniform value.

    I then have a bugfix for legacy mobile browsers made before the viewport META existed. It has to go into a "media query" saying small screens only since sending this value to desktop Safari can result in zoom being broken. (but not mobile safari... way to herp that derp Apple!)

    Next I set the font size and face for the majority of the document. I went with a sans-serif stack as serif fonts (like the default) can actually compromise legibility on screen. We need to set it for table, button, select, input, textarea, etc as those do not by default "inherit" from BODY like every other element in most browser. Which is REALLY huffing stupid!

    Where possible I declare everything in EM. The EM measurement is based on the default browser font-size that the user can change so they don't have to dive for the zoom. If you ever see PX (pixels) being used for font sizes, paddings, media queries, widths, heights, etc, in 90%+ of cases the developer is an inept moron unqualified to be developing websites. There are corner-case exceptions, but they are far and few between.

    From here out we'll go by selector.

    body -- since most of the page has it's text centered, just set it once in one place and forget it.

    h2,
    h3,
    .buy strong
    -- these all share the same colour, so set it once in one place. See a pattern here? Don't waste time in the markup manually dicking around with each and every element when you can do it all ONCE in one place.

    h1 -- size, colour, some padding to make it pretty... nothing to write home about. In your original you had a slew of line breaks doing padding/margin's job. Do not create markup you don't need just because "I want more space here"

    As EM is based on the CURRENT font size, which we set to 2em (doubles it) 0.5em padding == 1EM padding on a body element.

    h2 -- size and padding, again change the size, do the math for the padding.

    h3 -- see h2

    .plate,
    .video_16_9,
    .infoLinks,
    .buy
    -- these all get the same centering of their container and space after them. This gives us one place to control all their behaviors.

    .plate -- the plate image. Display:block lets us use auto margins to center it from the previous declaration. The max-width so that if the screen is smaller than the image, it will shrink-to-fit; very important in the age of mobile devices.

    .video_16_9 -- the position:relative lets us absolute position the IFRAME inside it. This is a bit of special "magic" as when we:

    .video_16_9:before -- create this bit of "generated content" being display:block it will expand to the width of the parent DIV, but percentage padding is based on the width of the container. By setting a height of zero and a bottom padding of 52.65% (9/16ths) the box will maintain a 16:9 aspect ratio, ideal for most videos. That means when we get to the IFRAME:

    .video_16_9 iframe -- we absolute postiion it over that padding. An absolute positioned element does not report its width or height to the parent, so its size doesn't influence the layout.

    That LOOKS complicated, it isn't. It's a pretty standard 'trick' right now for making "perfect" boxes for youtube embeds.

    Oh, I set the whole thing to 35em max-width which is 560px at normal font sizes, but could be almost any size depending on user preferences. Using this layout technique allows you to set it to any width you want, which is why it also shrinks to fit on mobile.

    You'll notice I mention mobile compatibility a lot.

    .infoLinks ul -- turn off bullets. YAWN.

    .infoLinks li -- pad the bottom slightly to space the list items apart more.

    DONE. There's your layout, it's even mobile friendly.

    Overall result is a hair less code overall, but that stylesheet can be re-used across all your product pages meaning that smaller, tighter, simpler HTML is all your need for each and every product. See how much easier it is to see the content and where to edit things? Yeah, that.

    Not that I would have the data-entry monkeys working with the markup. I'd have them working with either database entry or even just simple data files like .ini

    For example if your data were formatted as .ini data and saved as movieData/the_omen.data.ini

    
    [movie]
    number="123456789A123"
    name="The Omen"
    year="1976"
    price="3.00"
    
    [media]
    cover="https://c1.staticflickr.com/1/54/378445954_79b179afda_b.jpg"
    trailer="https://www.youtube.com/embed/V7CEbd7ffNw"
    
    [links]
    imdb="https://www.imdb.com/title/tt0075005/"
    wikipedia="https://en.wikipedia.org/wiki/The_Omen"
    
    Code (markup):
    You could just then have PHP read "?movie=the_omen", do a parse_ini_file($_GET['movie']), then plug the values into the template.

    I have to head out for a few hours, but I'll try to do a simple example of that later today, tomorrow at the latest.
     
    deathshadow, Feb 10, 2019 IP
  16. rhoniedotcom

    rhoniedotcom Well-Known Member

    Messages:
    259
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #16
    I have to head out myself. I have to go to set someone up with IPTV. I am sorry I am so ignorant when it comes to coding in 2019. My eyes can just not keep focused, and my brain has a problem comprehending things. Thank you.
     
    rhoniedotcom, Feb 10, 2019 IP
  17. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #17
    I tossed together some quick and dirty PHP. Live demo is here:

    https://cutcodedown.com/for_others/rhonieDotCom/coded/

    the .rar file in there is a complete archive of it. If you go to just:

    https://cutcodedown.com/for_others/rhonieDotCom/coded/movie.php

    You'll see it returns a styled 404. If you go to:

    https://cutcodedown.com/for_others/rhonieDotCom/coded/movie.php?movie=the_omen_1976

    you can see it loads the page using data from the movieData/the_omen_1976.data.ini

    Make other .data.ini files, and you get other movies off the existing template.

    DL the .rar and take a good deep look at the files. The highlights are:

    /template/common.template.php

    Contains the 'header' and 'footer' template functions for everything above and below the content area.

    /template/movie.template.php

    Holds the template_movie() function that outputs the movie from data.

    /movie.php

    Logic for that file is pretty simple:

    
    <?php
    
    include('template/common.template.php');
    
    if (array_key_exists('movie', $_GET)) {
    	if (preg_match('/\W/', $_GET['movie'])) {
    		template_header('Invalid character in movie name');
    		include('template/invalidChars.static.html');
    	} else if (file_exists(
    		$file = 'movieData/' . $_GET['movie'] . '.data.ini'
    	)) {
    		$data = parse_ini_file($file, true);
    		template_header($data['movie']['name'], ' (', $data['movie']['year'], ')');
    		include('template/movie.template.php');
    		template_movie($data);
    	} else {
    		header('HTTP/1.0 404 Not Found');
    		template_header('404 Not Found');
    		include('template/movieNotFound.static.html');
    	}
    } else {
    	template_header('No Movie Stated');
    	include('template/noMovie.static.html');
    }
    template_footer();
    
    Code (markup):
    Load the template, check if $_GET['movie'] is set (the ?movie= part of the URI), if so see if any characters that we don't want in filenames are present.

    If so bomb out and show a static content.

    If not create the filename and see it exists.

    IF it exists load the data from it, output our header, load the movie template, show the movie...

    Otherwise 404.

    Finally if that initial $_GET wasn't set, complain there was no movie.

    ... and regardless of what action was taken, show the footer last.

    You can see there are a bunch of static HTML files that are just flat output. By breaking it into separate files this way we're only loading what we know we need when we need it reducing the memory footprint and execution time.
     
    deathshadow, Feb 10, 2019 IP
  18. rhoniedotcom

    rhoniedotcom Well-Known Member

    Messages:
    259
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #18

    Something I hope you are not missing is that all of the coding has to be done offline -
    Also, I will have to evaluate each file before I post anything online.
    This is very important.
     
    rhoniedotcom, Feb 10, 2019 IP
  19. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #19
    That's actually the end goal of this code, to reduce how much "coding" has to be done offline to the point that ALL you need to edit/create for a new movie is a new .data.ini file.

    For example if you were to add "The Legend of Hell House" to this system, you'd just create a "legend_of_hell_house_1973.data.ini" file and upload it to the moviedata directory. The file would look like this:

    
    [movie]
    number="B00005LIRD"
    name="The Legend of Hell House"
    year="1973"
    price="2.00"
    
    [media]
    cover="images/dvdCovers/legend_of_hell_house_1973.jpg"
    trailer="https://www.youtube.com/embed/7YS84w7_4gs"
    
    [links]
    imdb="https://www.imdb.com/title/tt0070294/"
    wikipedia="https://en.wikipedia.org/wiki/The_Legend_of_Hell_House"
    
    Code (markup):
    Then you just call:

    movie.php?movie=legend_of_hell_house_1973

    ... and boom you're done making a new movie page. Your data-entry monkeys wouldn't even need to touch the HTML or CSS. Hence why I suggested the use of server-side PHP. Design the page once, re-use it multiple times... and with so much of the style moved out of the markup the external stylesheet can be cached, meaning that if people view more than one video on the site it saves bandwidth and speeds up subsequent pageloads.

    Pretty slick, right?
     
    deathshadow, Feb 10, 2019 IP
  20. rhoniedotcom

    rhoniedotcom Well-Known Member

    Messages:
    259
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #20
    Maybe I can give you some kind of a scope of what I want to do. I am going to sell DVD's and CD's. There are billions of titles of each in existence. Matter of fact, I would be surprised if you did not own over 100 titles yourself?
    Now, think of this, I am going to be buying DVD's only to begin with, and expand into buying CD's and games.
    I will be buying in lots of 100 or more, and they will be used, not new. The selling point for these are $2.00 to $3.00 each. That is all you can get for them. Matter of fact in my store I will be selling DVD's for $2.00 each and those will be marked that I will purchase them back for $1.00. If they are not marked I will not buy no less than 100 lots for much less than that.
    Now to sell a DVD online for $3.00 it cost basically $1.50 when you add the shipping cost and the cost of the payment processor etc... If I sell them on Ebay it will cost $2.00 to do the same. So the bottom line is that I will make less than $1.00 for each DVD I sell online.
    Now the only way I can get the web pages for selling DVD's is either produce them in house, or buy millions of DVD's at basically retail prices until I can get up and going. So, what I have to do is to find a very easy template to edit, and pay to have the web pages generated. Just scanning the pic's of the DVD cases is a full time job alone which I will do myself or pay an employee to do.
    Now with that being said, I am going to try to get a Redbox outside of my store as well. They rent DVD's for $1.50 per day. However, they will not have the inventory I have, plus I will be selling TV/Computer cables and some electronic equipment, and I hope to make money from IPTV payments also along with a few other things.
    In the store I will also sell DVD's for as low is 50 cents. Of course they are ones that are public domain or off beat titles. I will not buy those back, that is for sure.
    So, the template has to be easy, needs to be able to be downloaded and needs to be put in an open source web editor to be produced. And like you said, has to basically be easy enough to use that a Monkey can do it.
    Within 6 months time I hope to be buying no less than 1,000 DVD's/CD's per week, maybe per day?
    I also have off-shoots to sell them to, providing I could provide the web pages. - The best way to do that is by using simple HTML, so each web page can be saved and emailed. Even if it is old school HTML. Now, who ever succeeds in what I am asking to do should be able to make a fortune from it, not by only selling templates, but also inserting a link into the HTML for them. Just think of the SEO return for only the DVD listings? Add this to the amount of money the "Monkeys" will be able to produce, even at 25 cents per web page? Plus it will definitely encourage them to learn web design when they realize how much money they can really make by learning web design.
     
    rhoniedotcom, Feb 10, 2019 IP