HTML + CSS: Difference between revisions
No edit summary |
m (add a resource page) |
||
| (10 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
==HTML + CSS== | |||
==code editors== | ==code editors== | ||
* https://brackets.io/ | * <del>https://brackets.io/</del> | ||
* https://code.visualstudio.com/ (Microsoft) | * https://code.visualstudio.com/ (Microsoft) | ||
* https://vscodium.com/ (community-driven, freely-licensed binary distribution of Microsoft’s editor VS Code; without telemetry/tracking) | * https://vscodium.com/ (community-driven, freely-licensed binary distribution of Microsoft’s editor VS Code; without telemetry/tracking) | ||
| Line 26: | Line 28: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
* HTML is a markup language, it stands for: HyperText Markup Language | |||
* you use HTML to "mark up" a document with structure | |||
* each of these things between brackets (<code><></code>) are called "tags" or "elements" | |||
* most of them you "open" and "close": <nowiki><p></nowiki> = open a new paragraph, <nowiki></p></nowiki> = close the paragraph | |||
* some elements are "self-closing elements", like the <img> element, this one you don't have to close | |||
You can find a list of elements here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element | |||
==CSS== | ==CSS== | ||
| Line 38: | Line 48: | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
* a code block like the one above: is called a '''rule''' | |||
* <code>body</code>: is a '''selector''' | |||
* <code>background-color</code>: is a '''property''' | |||
* <code>pink</code>: is a '''value''' | |||
You can find an index of CSS rules, selectors, properties and values here: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference#index | |||
==W3C== | ==W3C== | ||
| Line 46: | Line 63: | ||
https://www.w3.org/ | https://www.w3.org/ | ||
==web subcultures== | |||
* [https://indieweb.org/ indieweb] | |||
* digital gardens | |||
* [[Pubnix|pubnix servers]] (tilde/~ servers) | |||
* [[webrings]] | |||
* [[web clubs]] | |||
* [[web zines]] | |||
==tutorials & zines== | ==tutorials & zines== | ||
| Line 60: | Line 86: | ||
* https://developer.mozilla.org/en-US/docs/Web/HTML | * https://developer.mozilla.org/en-US/docs/Web/HTML | ||
* https://developer.mozilla.org/en-US/docs/Web/CSS | * https://developer.mozilla.org/en-US/docs/Web/CSS | ||
* https://www.w3schools.com/html/default.asp | |||
* https://www.w3schools.com/css/default.asp | |||
==XPUB web pages== | ==XPUB web pages== | ||
| Line 81: | Line 109: | ||
* https://pad.xpub.nl/p/SI19-prototyping-3 HTML + CSS continued | * https://pad.xpub.nl/p/SI19-prototyping-3 HTML + CSS continued | ||
* https://pad.xpub.nl/p/SI19-prototyping-4 CSS Flex, Grid, Transition, Animation | * https://pad.xpub.nl/p/SI19-prototyping-4 CSS Flex, Grid, Transition, Animation | ||
==Links Library== | |||
*[[User:Kiara/Code|Kiara's list of resources to learn]] | |||
[[Category:Cookbook]] | [[Category:Cookbook]] | ||
[[Category:PagedMedia]] | [[Category:PagedMedia]] | ||
Latest revision as of 16:27, 17 September 2024
HTML + CSS
code editors
https://brackets.io/- https://code.visualstudio.com/ (Microsoft)
- https://vscodium.com/ (community-driven, freely-licensed binary distribution of Microsoft’s editor VS Code; without telemetry/tracking)
- https://www.geany.org/
- https://kate-editor.org/
- https://www.sublimetext.com/ (freeware)
- https://pulsar-edit.dev/ (fork of Atom)
- https://notepad-plus-plus.org/ (Windows only)
- https://www.vim.org/ (terminal based)
- https://www.gnu.org/software/emacs/ (terminal based)
- https://www.nano-editor.org/ (terminal based)
HTML
HyperText Markup Language
<head>
<body>
<h1></h1>
<p></p>
<img>
- HTML is a markup language, it stands for: HyperText Markup Language
- you use HTML to "mark up" a document with structure
- each of these things between brackets (
<>) are called "tags" or "elements" - most of them you "open" and "close": <p> = open a new paragraph, </p> = close the paragraph
- some elements are "self-closing elements", like the
element, this one you don't have to close
You can find a list of elements here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element
CSS
Cascading Style Sheets
body{
background-color: pink;
color: green;
margin: 100px;
}
- a code block like the one above: is called a rule
body: is a selectorbackground-color: is a propertypink: is a value
You can find an index of CSS rules, selectors, properties and values here: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference#index
W3C
W3C is the Web consortium that make decisions about web standards.
They write very heavy documentation. This documentation is mostly used by people making web browsers.
web subcultures
- indieweb
- digital gardens
- pubnix servers (tilde/~ servers)
- webrings
- web clubs
- web zines
tutorials & zines
- https://www.w3schools.com/
- https://developer.mozilla.org/en-US/docs/Web/Tutorials
- https://solarpunk.cool/zines/web-zine-01/
- https://curly-braces.hashbase.io
- https://css-examples.wizardzines.com/
documentation
- https://devdocs.io
- https://developer.mozilla.org/en-US/docs/Web/HTML
- https://developer.mozilla.org/en-US/docs/Web/CSS
- https://www.w3schools.com/html/default.asp
- https://www.w3schools.com/css/default.asp
XPUB web pages
first pages XPUB1 2022-2024
- https://hub.xpub.nl/breadcube/~bo/first-webpage.html
- https://hub.xpub.nl/breadcube/~log/small-print.html
- https://hub.xpub.nl/breadcube/~aglaia/simonsays/testpage.html
- https://hub.xpub.nl/breadcube/~ada/cowboys/cowboys.html
- https://hub.xpub.nl/breadcube/~suzan/transparentblue.html
- https://hub.xpub.nl/breadcube/~suzan/hello.html
hyperworld
Pad traces
- https://pad.xpub.nl/p/SI19-prototyping-2 HTML + CSS intro
- https://pad.xpub.nl/p/SI19-prototyping-3 HTML + CSS continued
- https://pad.xpub.nl/p/SI19-prototyping-4 CSS Flex, Grid, Transition, Animation