Simple website

Simple elements. Flow elements

HTML

HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content HTML uses "markup" to annotate text, images, and other content for display in a Web browser. HTML markup includes special "elements" such as <head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img>, <aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <nav>, <search>, <output>, <progress>, <video>, <ul>, <ol>, <li> and many others. An HTML element is set off from other text in a document by "tags", which consist of the element name surrounded by "<" & ">". The name of an element inside a tag is case-insensitive. That is, it can be written in uppercase, lowercase, or a mixture. For example, the <title> tag can be written as <Title>, <TITLE>, or in any other way. However, the convention and recommended practice is to write tags in lowercase.

{A} Attribute

The <a> HTML element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address. Content within each <a> should indicate the link's destination. If the href attribute is present, pressing the enter key while focused on the <a> element will activate it.

{abbr} Attribute

When including an abbreviation or acronym, provide a full expansion of the term in plain text on first use, along with the <abbr> to mark up the abbreviation. This informs the user what the abbreviation or acronym means. The optional -title- attribute can provide an expansion for the abbreviation or acronym when a full expansion is not present. This provides a hint to user agents on how to announce/display the content while informing all users what the abbreviation means. If present, -title- must contain this full description and nothing else.

Colors

Color Referance Numbers
Shades of Red
#ff0000
#d60000 ##970000 #690000 #490000
Shades of Green
#008000
#00c000 #008800 #007400 #003a00
Shades of Blue
#0000ff
#0000d1 #0000af #000077 #000049
Shades of White
#ffffff
#f3eeeb #e9e3db #dad2c8 #cfc4b4
Shades of Grey
#808080
#8f8f8f #9e9e9e #a8a8a8 #bebebe
Shades of Black
#000000
#161515 #1f1c1c #332d2d #362f2f

Fonts and styling

Roboto

  • Roboto (font-weight 200)
  • Roboto (font-weight 400)
  • Roboto (font-weight 400 italic)
  • Roboto (font-weight 600)

Playfair_Display

  • Playfair_Display (font-weight 400)
  • Playfair_Display (font-weight 600)
  • Playfair_Display (font weight 600 italic)