HTML + CSS: Difference between revisions

Latest revision as of 21:16, 9 May 2024

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>

CSS

Cascading Style Sheets

body{
    background-color: pink;
    color: green;
    margin: 100px;
}

a code block like the one above: is a rule
body: is a selector
background-color: is a property
pink: is a value

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 communities

indieweb
digital gardens
pubnix servers (tilde/~ servers)
webrings

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

@@ Line 9: / Line 9: @@
 * 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==
@@ Line 14: / Line 17: @@
 HyperText Markup Language
- <nowiki><head></nowiki>
+<syntaxhighlight lang="html">
- <nowiki><body></nowiki>
- <nowiki><h1></nowiki>
- <nowiki><img></nowiki>
-* inspector
+<head>
-* commonly used elements
+<body>
-* linking to each other
+<h1></h1>
-* adding media (images, video, audio)
+<p></p>
+<img>
+</syntaxhighlight>
 ==CSS==
 Cascading Style Sheets
+<syntaxhighlight lang="css">
+body{
+    background-color: pink;
+    color: green;
+    margin: 100px;
+}
+</syntaxhighlight>
+* a code block like the one above: is a '''rule'''
+* <code>body</code>: is a '''selector'''
+* <code>background-color</code>: is a '''property'''
+* <code>pink</code>: is a '''value'''
 ==W3C==
@@ Line 35: / Line 51: @@
 https://www.w3.org/
+==web communities==
+* indieweb
+* digital gardens
+* pubnix servers (tilde/~ servers)
+* webrings
 ==tutorials & zines==
@@ Line 50: / Line 73: @@
 * https://developer.mozilla.org/en-US/docs/Web/CSS
-==upload your HTML page to a server==
+==XPUB web pages==
-* [https://wiki.filezilla-project.org/Main_Page FileZilla]
-==XPUB1 web pages==
-first pages
+first pages XPUB1 2022-2024
 * https://hub.xpub.nl/breadcube/~bo/first-webpage.html
@@ Line 69: / Line 88: @@
 * https://hub.xpub.nl/breadcube/hyperworld/
-==pads==
+==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
+[[Category:Cookbook]]
+[[Category:PagedMedia]]