web-aez-notes

SVG
HTML
- Examples
- Basics
- Linkage
CSS Notes
Environment

SVG

Scalable Vector Graphics (SVG) is a language for vector graphics in 2D which may be interactive or include animation.
SVG images can live in their own file or be embedded in HTML.
There are graphics elements which form our basic objects, they are styled with presentational attributes.
- The presentational attributes include:
  - stroke and stroke-width, stroke-opacity etc,
  - fill and fill-opacity,
  - font and its friends.
  - Colours can be specified in all the standard ways.
Structural elements are ways to group together related graphics elements.
There are transformation to alter the properties of an element.
SVG is aware of user events and has event handlers to respond to them.
Basic shapes:
- <rect> has x and y and a width and height,
- <circle> has a cx and cy to define the centre and a r for the radius,
- <line> has x1 and y1, and x2 and y2.
There is a turtle-like graphics DSL which can be used with the path to draw more complex shapes.
There is the <text> elements to include text.
You can use CSS to style the elements of an SVG.

HTML

Examples

Minimal example

<!DOCTYPE html>
<html>
    <head>
      <meta charset="UTF-8">
      <title>Foobar</title>
    </head>

    <body>
    </body>
</html>

External CSS

To apply CSS from a file add a link in the head to that file.

<link rel="stylesheet" href="mystyle.css">

Internal CSS

To have inline CSS include the following element in the <head>.

 <style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
}
</style>

Basics

Tag	Use
`<strong>`	bold text
`<p>`	paragraph
`<img src="">`	image
`<a href=""></a>`	link

Linkage

You can ask the browser to open a link in a new tab by adding target="_blank" to an a tag. There used to be a security risk in doing this, but it seems to have been resolved in the big-name browsers.

CSS Notes

Selectors

The basic ways to select are with:

type,
#id,
.class,
and :pseudo-class (for example :hover)

These can be combined to refine the selection, for example p.nav or a:visited. A comma separated list will select all the things that match at least one selector in the list. White space between selectros is used to select children, for example p b will select all bold descendents of a paragraph element.

Grid vs Flexbox

Use Flexbox if you only have a one-dimensional layout, otherwise use Grid.

Syntax

Here is a very simple example of how CSS works with HTML. First we need some HTML

<fleeb class="squanch"></fleeb>
<plumbus id="hizzard"></plumbus>

then some CSS to style it:

fleeb.squanch {

    key: value;

  }

#hizzard {

    key: value;

}

The fleeb tag uses the tag.class way to select an element to apply a style to while the plumbus tag goes for a unique identifier. These identifiers can also be used to hyperlink to specific parts of a page with a tags.

CSS for this website!

For the most part I have attempted to keep this website looking the same as my emacs setup. As with all aspects of this website, it is a work in progress.

Light theme: https://aezarebski.github.io/css/stylesheet.css
Dark theme: https://aezarebski.github.io/css/stylesheet-dark.css

Environment

You can use a .jsbeautifyrc file to configure the behaviour of web-beautify.