more HTML tags

tools = require('../js/tools'); tools.init()

multimedia¶

• <img>

• <audio>

• <video>

find out more on these by yourselves

graphics and <svg>¶

• SVG is a complete subsystem to deal with vector graphics

• learn more about SVG at w3schools (basic)

• and much more on css-tricks
  (very advanced, including animations)

svg example¶

svg_html=`<h1>my first SVG</h1>

<svg width="200" height="200">
  <circle cx="50" cy="50" r="20" />
  <rect x="50" y="20" width="150" height="150" />
</svg>`

svg_css = `svg {
  border: 1px solid black;
}
rect {
  fill: blue;
  stroke: pink;
  stroke-width: 5;
  fill-opacity: 0.1;
  stroke-opacity: 0.8;
}

circle {
  stroke: rgb(100 200 50);
  stroke-width: 4;
  fill: yellow;
}`

tools.sample_from_strings({html: svg_html, css: svg_css})

form-oriented¶

for building forms :

• <input> for entering data

• <button> for validating data

• <form> to group user-provided input

out of scope for this course though, as it involves a backend

sectioning¶

• <h1> .. <h6> are only meaningful for the title line

• but are too poor to actually convey sectioning information

• so in addition to these, there are also

  • <section>

  • <nav>

  • and a few others as described here

sectioning example¶

tools.sample_from_stem("../samples/18-sections")

miscell others¶

in a jumble :

• <br> to insert a linebreak

• <hr> to insert a horizontal line

• <iframe> to insert another web page

• <canvas> is a more recent alternative to SVG for graphics,
  see more on css-tricks

practice¶

• before you start, make sure to read next section on vs-code tricks

• and then, as a conclusion of this first basic course, write your complete resume; you should have 2 files

  • resume.html

  • resume.css

• at this point, you may think of it as (if it were) a word document

  • with a header that has your details and photo

  • and the 4 well structured sections,

  • again Experience, Education, Skills and Languages

• try to print it in a PDF file, to evaluate how it fits with respect to an A4 page