Цифровой садик - приветственная

Цифровой садик - приветственная | Полный список всего, что тут есть | RSS | Подписаться через follow.it

08.01.2023

сайтодельство

w3c-schools

Подборочка ссылок, которую я насохраняла себе при каком-то предыдущем забеге в обновление представлений о html+css. Вообще, резоннее рассовать по этой страничке по темам, но пусть пока так. 

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

Яндеховости

flat file cms

Полезняшки

doctype-ы html 4, xhtml 1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd">

html5 почти минимальный файл

Короткий doctype. Скриптам и стилям не надо лишних атрибутов. Кодировку тож попроще указывать. 

<!DOCTYPE html>
<html lang=ru>
 <head>
  <meta charset="utf-8">
  <title>Пример страницы</title>
  <style>
  p { color:  navy; }
  </style>
 </head>
 <body>
  <p>Страница на HTML5</p>
 </body>
</html>

css, чёрный фон с прозрачностью 0.5

Пример позволяет ставить прозрачность, не задевая текст 

background-color:rgba(0,0,0, 0.5);

font-display:swap, если надо грузить шрифты

How to avoid showing invisible text

The easiest way to avoid showing invisible text while custom fonts load is to temporarily show a system font. By including font-display: swap in your @font-face style, you can avoid FOIT in most modern browsers: 

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
  font-display: swap;
}

The font-display API specifies how a font is displayed. swap tells the browser that text using the font should be displayed immediately using a system font. Once the custom font is ready, it replaces the system font. (See the Avoid invisible text during loading post for more information.)

https://web.dev/codelab-avoid-invisible-text - развитие темы.

гамбургер и тизер-енд

<!-- ☰-->
<!-- TEASER_END: Читать дальше -->

подгонка контента под размер окна

main {
  min-height: calc(100vh - 2em);
}

https://baradusov.ru/posts/2018/math-and-frontend - css-трюки в некотором количестве.

перенаправление - html meta

Откуда-то давно прихвачено 

<!-- remove the following three lines to stop redirecting to the help page
<meta http-equiv="refresh" content="1;url=/help/" />
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache"> -->

css-диагональка

background-image: linear-gradient(to top right, transparent 45%, #fff, transparent 54%)

css - выравнивание

To horizontally center a block element (like <div>), use margin: auto; https://www.w3schools.com/css/css_align.asp - про горизонтальное и вертикальное выравнивание, в том числе отдельно про картинки.

The clearfix Hack

Note: If an element is taller than the element containing it, and it is floated, it will overflow outside of its container. You can use the "clearfix hack" to fix this (see example below).

Then we can add the clearfix hack to the containing element to fix this problem: 

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

картинки для сайта

адреса, на которые ничего не надо класть, я полагаю

Потому что кто-то туда стучится, несмотря на то, что там вообще ничего нет и не было. 

/ads.txt
/wp-content/plugins/wpputty/wpputty.php
/wp-content/plugins/dos2unix/dos2unix.php
/wp-content/plugins/wpyii2/wpyii2.php
/wp-content/plugins/wpzip/wpzip.php
/s/8383e26313e2633323e27383/_/
/new/
/.DS_Store
/backup/
/temp/
/wp-includes/wlwmanifest.xml
/config.json
/ecp/Current/exporttool/microsoft.exchange.ediscovery.exporttool.application
/wordpress/
/api/search
/info.php
/old/
/_ignition/health-check/
/wp/
/about
/debug/default/view
/public/_ignition/health-check/
/blog/
/login.action
/_ignition/execute-solution
/test/
/telescope/requests
/v2/_catalog
/wp-22.php
/home
/apple-touch-icon-precomposed.png
//wp-includes/wlwmanifest.xml
/wp-config.php-backup
/bc
/alfacgiapi/perl.alfa
//wp2/wp-includes/wlwmanifest.xml
//news/wp-includes/wlwmanifest.xml
//web/wp-includes/wlwmanifest.xml
/ALFA_DATA/alfacgiapi/perl.alfa
//test/wp-includes/wlwmanifest.xml
//media/wp-includes/wlwmanifest.xml
/wp
//blog/wp-includes/wlwmanifest.xml
//site/wp-includes/wlwmanifest.xml
/backup
/wordpress
/wordpress/wp-admin/setup-config.php
//2018/wp-includes/wlwmanifest.xml
//wordpress/wp-includes/wlwmanifest.xml
/adminer-4.2.4-mysql-en.php
//wp/wp-includes/wlwmanifest.xml
/old/wp-admin/setup-config.php
/old
/.aws/credentials
//cms/wp-includes/wlwmanifest.xml
/apple-touch-icon.png
/test_404_page/
/wxuxtjzv.php
/main
/1nESR59GdXi0
//2019/wp-includes/wlwmanifest.xml
//wp1/wp-includes/wlwmanifest.xml
//website/wp-includes/wlwmanifest.xml
/new
/bk
//shop/wp-includes/wlwmanifest.xml
//sito/wp-includes/wlwmanifest.xml
/wp-plain.php

Если у вас есть мысли, комментарии, предложения или отклики по поводу этой страницы или этого цифрового сада в целом, напишите мне сообщение через Яндекс.Форму или на agnessa@agnessa.pp.ru. Мне ооочень интересно!

Задонатить.

← An IndieWeb Webring 🕸💍 →