HTML + CSS: Difference between revisions

From XPUB & Lens-Based wiki
 
(15 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 9: Line 11:
* https://pulsar-edit.dev/ (fork of Atom)
* https://pulsar-edit.dev/ (fork of Atom)
* https://notepad-plus-plus.org/ (Windows only)
* https://notepad-plus-plus.org/ (Windows only)
* https://www.vim.org/  
* https://www.vim.org/ (terminal based)
* https://www.gnu.org/software/emacs/
* https://www.gnu.org/software/emacs/ (terminal based)
* https://www.nano-editor.org/ (terminal based)


==HTML==
==HTML==
Line 25: 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 37: 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 45: 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 59: 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 80: 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
==Wiki Ring==
Other Pages on this Wiki about HTML and CSS: <br>
* [[HTML]]
* [[HTML/CSS_Memo]]
* [[User:Kiara/Code|Kiara's list of resources to learn]]
* [[HTML club]]
[[Category:Cookbook]]
[[Category:PagedMedia]]

Latest revision as of 20:52, 12 November 2024

HTML + CSS

code editors

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

tutorials & zines

documentation

XPUB web pages

first pages XPUB1 2022-2024

hyperworld

Pad traces

Wiki Ring

Other Pages on this Wiki about HTML and CSS:

Retrieved from "https://pzwiki.wdka.nl/mw-mediadesign/index.php?title=HTML_%2B_CSS&oldid=280421"