HTML + CSS: Difference between revisions

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 selector
background-color: is a property
pink: 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.

https://www.w3.org/

web subcultures

indieweb
digital gardens
pubnix servers (tilde/~ servers)
webrings
web clubs
web zines

tutorials & zines

documentation

XPUB web pages

first pages XPUB1 2022-2024

hyperworld

https://hub.xpub.nl/breadcube/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

Links Library

Kiara's list of resources to learn

@@ Line 1: / Line 1: @@
+==HTML + CSS==
 ==code editors==
-ide's
+* <del>https://brackets.io/</del>
+* https://code.visualstudio.com/ (Microsoft)
-* https://brackets.io/
+* https://vscodium.com/ (community-driven, freely-licensed binary distribution of Microsoft’s editor VS Code; without telemetry/tracking)
-* https://vscodium.com/
 * https://www.geany.org/
 * https://kate-editor.org/
-* https://www.sublimetext.com/
+* 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
+<syntaxhighlight lang="html">
-==connect to the server==
+<head>
+<body>
+<h1></h1>
+<p></p>
+<img>
-filezilla
+</syntaxhighlight>
-==HTML==
+* 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
-* inspector
+You can find a list of elements here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element
-* devdocs
-* commonly used elements
-* linking to each other
-* adding media (images, video, audio)
 ==CSS==
+Cascading Style Sheets
+<syntaxhighlight lang="css">
+body{
+    background-color: pink;
+    color: green;
+    margin: 100px;
+}
+</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 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.
+https://www.w3.org/
+==web subcultures==
+* [https://indieweb.org/ indieweb]
+* digital gardens
+* [[Pubnix|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
+* https://hub.xpub.nl/breadcube/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
+==Links Library==
+*[[User:Kiara/Code|Kiara's list of resources to learn]]
+[[Category:Cookbook]]
+[[Category:PagedMedia]]