Circuit Webpage Primer Tutorial

Circuit Webpage Primer Tutorial

Circuit Webpage Primer Tutorial

We’re on our way to a more fully fleshed out web application that makes use of a “circuit”, but we want to approach this project in stages.

Stage one is to create some initial HTML and CSS to show a circuit. We construct it, debatably, via underpinnings that involve …

  • HTML table element
  • Cells (td elements) involving colspan and rowspan attributes
  • Background colours strategically defined
  • Border characteristics such as …
    1. CSS border-radius
    2. Some CSS border-top and border-bottom merged into background colour with an offset …
    3. HTML hr elements replace some border-top and border-bottom “lines”

You can see the HTML and CSS (combination of head style definitions and inline CSS within the HTML) at circuit.html and try it out for yourself at our live run link today. We hope it gets you thinking.

If this was interesting you may be interested in this too.

This entry was posted in eLearning, Tutorials and tagged , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>