Html: Difference between revisions
Jump to navigation
Jump to search
| Line 40: | Line 40: | ||
== Tips and Pits == |
== Tips and Pits == |
||
=== Set charset specification in the first 1024 bytes === |
|||
* <code><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /></code> in HEAD tag must come soon enough. |
* <code><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /></code> in HEAD tag must come soon enough. |
||
<pre> |
<pre> |
||
| Line 46: | Line 46: | ||
</pre> |
</pre> |
||
=== Set multi-column layout, with no-break sections === |
|||
* See [https://stackoverflow.com/questions/7785374/how-to-prevent-column-break-within-an-element This SO]. |
* See [https://stackoverflow.com/questions/7785374/how-to-prevent-column-break-within-an-element This SO]. |
||
* We can use <code>break-inside: avoid-column;</code> on all browsers but FF, and <code>display: table</code> in FF 20+ |
* We can use <code>break-inside: avoid-column;</code> on all browsers but FF, and <code>display: table</code> in FF 20+ |
||
| Line 65: | Line 65: | ||
} |
} |
||
</pre> |
</pre> |
||
=== Table: Use same width for all columns except first one=== |
|||
Tricks: use <code>min-width</code> for the first column, and allocate 100% width to the remaining columns. |
|||
<pre lang="html"> |
|||
{| class="wikitable" width="100%" |
|||
|- |
|||
| style="min-width: 6em;" | First |
|||
| width="50%" | Second |
|||
| width="50%" | Third |
|||
|- |
|||
| Foo |
|||
| Bar |
|||
| Baz |
|||
|} |
|||
</pre> |
|||
{| class="wikitable" width="100%" |
|||
|- |
|||
| style="min-width: 6em;" | First |
|||
| width="50%" | Second |
|||
| width="50%" | Third |
|||
|- |
|||
| Foo |
|||
| Bar |
|||
| Baz |
|||
|} |
|||
Revision as of 14:53, 10 October 2021
References
- Tools
- Online source code highlighting in HTML (very nice, iPlastic is my current favorite)
- Entities
- Tips
Examples
Basic
<!DOCTYPE html>
<html lang="en">
<head></head>
<body><p>A paragraph with <code style="font-family: Consolas;">styled code text</code>.</p></body>
</html>
Include another file
- Using server-side include
- If it doesn't work, TRY NAMING THE FILE WITH A .shtml EXTENSION!
- In Apache, SSI (include module) must be enabled.
<!--#include file="insertthisfile.html" -->
<!--#include virtual="insertthisurl_cgi.html" -->
- Using server-side include - PHP
- We can also use PHP, if the server is configured for it:
<?php include("filename.html"); ?>
<?php include("http://www.othersite.com/filename.html"); ?>
Tips and Pits
Set charset specification in the first 1024 bytes
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />in HEAD tag must come soon enough.
The page was reloaded, because the character encoding declaration of the HTML document was not found when prescanning the first 1024 bytes of the file. The encoding declaration needs to be moved to be within the first 1024 bytes of the file.
Set multi-column layout, with no-break sections
- See This SO.
- We can use
break-inside: avoid-column;on all browsers but FF, anddisplay: tablein FF 20+ - For instance, to prevent breaks in bulleted list.
.x {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
width: 30em;
}
.x ul {
margin: 0;
page-break-inside: avoid; /* Theoretically FF 20+ */
break-inside: avoid-column; /* Chrome, Safari, IE 11 */
display:table; /* Actually FF 20+ */
}
Table: Use same width for all columns except first one
Tricks: use min-width for the first column, and allocate 100% width to the remaining columns.
{| class="wikitable" width="100%"
|-
| style="min-width: 6em;" | First
| width="50%" | Second
| width="50%" | Third
|-
| Foo
| Bar
| Baz
|}
| First | Second | Third |
| Foo | Bar | Baz |