Html: Difference between revisions

From miki
Jump to navigation Jump to search
 
(10 intermediate revisions by the same user not shown)
Line 1: Line 1:
== References ==
== References ==
* [http://www.boutell.com/newfaq/creating/include.html WWW FAQs: How do I include one HTML file in another?]
* [http://www.boutell.com/newfaq/creating/include.html WWW FAQs: How do I include one HTML file in another?]

;Tools
* [http://markup.su/highlighter/ Online source code highlighting in HTML] (very nice, iPlastic is my current favorite)

;Entities
* http://www.freeformatter.com/html-entities.html
* https://dev.w3.org/html5/html-author/charref

;Tips
* https://markodenic.com/html-tips/

== Examples ==

=== Basic ===
<source lang="html">
<!DOCTYPE html>
<html lang="en">
<head></head>
<body><p>A paragraph with <code style="font-family: Consolas;">styled code text</code>.</p></body>
</html>
</source>


== Include another file ==
== Include another file ==
;Using server-side include
;Using server-side include
:If it doesn't work, TRY NAMING THE FILE WITH A {{file|.shtml}} EXTENSION!
:If it doesn't work, TRY NAMING THE FILE WITH A {{file|.shtml}} EXTENSION!
:In Apache, SSI (''include'' module) must be enabled.
<source lang=html4strict>
<source lang=html4strict>
<!--#include file="insertthisfile.html" -->
<!--#include file="insertthisfile.html" -->
Line 15: Line 37:
<?php include("filename.html"); ?>
<?php include("filename.html"); ?>
<?php include("http://www.othersite.com/filename.html"); ?>
<?php include("http://www.othersite.com/filename.html"); ?>
</source>

== 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.
<pre>
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.
</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].
* We can use <code>break-inside: avoid-column;</code> on all browsers but FF, and <code>display: table</code> in FF 20+
* For instance, to prevent breaks in bulleted list.
<pre>
.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+ */
}
</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
|}

=== Format HTML ===

Using {{deb|tidy}}:
<source lang="bash">
# tidy is an terrible spammer, make sure you mute the warnings explicitly (as if --quiet was not enough)
tidy -q -i -m -w 160 --show-warnings no -ashtml -utf8 replay.html
</source>
</source>

Latest revision as of 23:25, 26 February 2022

References

Tools
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, and display: table in 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

Format HTML

Using tidy:

# tidy is an terrible spammer, make sure you mute the warnings explicitly (as if --quiet was not enough)
tidy -q -i -m -w 160 --show-warnings no -ashtml -utf8 replay.html