I am working with a very big HTML file, which has a lot of content in the body section.
Are there any "compilers" or merging applications for HTML that can merge multiple HTML files?
Example:
a.htm
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
INCLUDE "b.htm"
<div>
INCLUDE "c.htm"
</div>
</body>
</html>
b.htm
some text
Link
INCLUDE "c.htm"
c.htm
more <span>text</span>
would be merged to:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
some text
Link
more <span>text</span>
<div>
more <span>text</span>
</div>
</body>
</html>
There are indeed – depending on your needs these offer drastically different mechanisms and tools.
One particular quite simple HTML compiler that is fashionable at the moment is Jekyll. Jekyll powers the blogging engine on GitHub Pages and is both easy to use and extensible.
In your case, you’d for instance write
{% include c.htm %}
instead of
INCLUDE "c.htm"
I decided to write htmlcat for exactly this purpose.
Related
I am using Sublime text to write some HTML and CSS files. I've created my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>RainyDayBakes</title>
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 style="text-align:center">RainyDayBakes</h1>
<nav style="text-align:center">
<a href=”C:\Users\sarah\Documents\Simmons\CS-321\page1.html”> About </a>
<a href=”page2.html”> Menu </a>
<a href=”page3.html”> Gallery </a>
<a href=”page4.html”> Order </a>
<a href=”page5.html”> Contact Us </a>
</nav>
<img src="cake.png" alt="oreo crumble cake" class="center">
<h3>Welcome to RainyDayBakes!</h3>
<p>We are a local bakery specializing in creative cakes, cupcakes and cookies!</p>
<p>In addition to being open daily we also offer custom ordered confections.</p>
<!-- Scripts -->
<script src="scripts/index.js"></script>
</body>
<footer>
</footer>
</html>
my page1.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>This is Page One </title>
</head>
<body>
</body>
<footer>
</footer>
</html>
and my style.css:
<style>
h1 {
color:red;
}
</style>
When I try to run index.html in Chrome, the link to page1.html says it doesn't exist, and the CSS won't show up. They're all in the same folder, I've saved all the files, and I'm running on Chrome. Every other solution I've found refers to making a typo, the directories being different, etc. but as said, they're all in the same folder, and I haven't noticed a typo (but it's entirely possible when you're too close to your code).
First off, you're not even using the tag anywhere in your code, so that's why the style isn't showing up. Secondly, if they are in the same folder, just link your about page to page1.html; not the full directory listings.
You are using typographical quotes in your links' href attributes, which won't work. Change those to regular quotes.
Let the link be this way instead href=”page1.html”
You might want to put a link to your CSS file on all your pages, I don't see it on your page1.html You probably already know about this resource but I mention it just in case you don't: W3 Schools is very handy for a quick reference to a lot of HTML/CSS questions.
So you have two issues:
For page1.html, would suggest adding file:// or file:/// to the beginning of the href element, or maybe retyping the line since the other links worked
For your CSS, remove the tag, it's for when you put the style inside the HTML file(embedded)
This isn't an issue with your code. I was having the same exact problem too and i recently discovered that the problem likely lies in the IDE that you're using. I was using stackblitz and recived the same output. But when i switched to an online compiler and litteraly copy & pasted the code with the same file names, the code started working correctly. Try using an online compiler and see how that works out for you. It worked for me.
The compiler I used is:
https://www.onlinegdb.com/
make sure to switch the languate to HTML using the language dropdown on the top right corner.
New browsers are intelligent enough to add missing close tags. What is the performance impact due to this? Does browser take more time to parse compared to downloading in decent speed network. Any impact in SEO
In the below snippets, both produce the same output. Bytes are calculated after minification.
HTML with Missing Tags (164 bytes)
<!DOCTYPE html>
<html>
<head>
<body>
<div id=content>
<h2><s><span>Copy + Paste</s> CODING in Progress (Zzzz...)
</div>
<div id=mail>
<h3><a href=mailto:#>#<title>Home
Valid HTML (227 bytes)
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
</head>
<body>
<div id="content">
<h2><s><span>Copy + Paste</span></s> CODING in Progress (Zzzz...)</h2>
</div>
<div id="mail">
<h3>#</h3>
</div>
</body>
</html>
To see a website in action with missing tags.
Disclaimer: This is my personal website.
I tried both the code snippets:
for one with missing code I got this:
for one with proper closing tags I got this:
You can eliminate the scripting time, and there is no network request or additional rendering.
And see the overheads in Paint and Render methods.
I'm using Jekyll to generate some static html pages. However I'd like to also generate the same layouts but with different variables. I for the life of me can't seem to articulate what I mean, so here's a basic example:
_config.yml
title: Foos and Bars
Generated index.html
<!DOCTYPE html>
<html>
<body>
<h1>Foos and Bars</h1>
</body>
</html>
And then I'd like to use the same base template (index.html) to generate more pages:
Generated index_2.html
<!DOCTYPE html>
<html>
<body>
<h1>Bars and Foos</h1>
</body>
</html>
Generated index_3.html
<!DOCTYPE html>
<html>
<body>
<h1>And Foos Bars</h1>
</body>
</html>
Do I need to create another _config.yml file and run it each time? It just seems too inefficient. Can all of these variables be stored in the same _config.yml? Is there a program/method that's much more efficient?
Let me know what and if I can clarify. Thanks for taking a look and any input you might offer.
If I understand your problem, your solution would be to use a YAML front matter in each of your pages where the dedicated "_config.yml variables" are declared.
Given you have a layout file page.html in the _layouts directory of your jekyll project like this:
<!DOCTYPE html>
<html>
<body>
<h1>{{ page.title }}</h1>
<p>{{ page.content }}</p>
</body>
</html>
You can then create a page -- let's call it index.html -- using this layout as follows:
---
layout: page
title: Foos and Bars
---
This is the text of my page
This will generate the following index.html in your _site directory:
<!DOCTYPE html>
<html>
<body>
<h1>Foos and Bars</h1>
<p>This is the text of my page</p>
</body>
</html>
This other page -- let's call it index_2.html:
---
layout: page
title: Bars and Foos
---
This is the other text of my other page
will generate index_2.html in your _site directory:
<!DOCTYPE html>
<html>
<body>
<h1>Bars and Foos</h1>
<p>This is the other text of my other page</p>
</body>
</html>
See official documentation.
I have always wondered but can't really find an answer anywhere if there are any set standards regarding indenting the body or head tag.
Is this version correct?
<html>
<head>
</head>
<body>
</body>
</html>
Or this one?
<html>
<head>
</head>
<body>
</body>
</html>
Whilst I appreciate that it probably doesn't make the slightest bit of difference as far as the functionality of the final website goes, we are all human beings, and all blessed with the gift / burden that is curiosity.
Are there any set standards or does it not matter?
HTML does not care about indentation, it only requires proper nesting. It is parsed the same (except for whitespace text nodes of course), it does really not matter for correctness.
While proper indentation does matter for readability, many people choose not to indent <html>, <head> and <body> tags as their structure is trivial, and only shifts the whole document rightwards unnecessarily. The contents of those tags should always be indented for clean markup, so that the nesting structure is clear to the reader.
To answer your question explicitly:
Should <head> and <body> tags be on a different level of indentation to <html>?
There is no need for that, as everybody knows they are nested in <html>. You can do it if you want. Both
<html>
<head>
<title>…</title>
…
<head>
<body>
<div>
<div>…</div>
…
</div>
…
</body>
<html>
and
<html>
<head>
<title>…</title>
…
<head>
<body>
<div>
<div>…</div>
…
</div>
…
</body>
<html>
are fine, while the following is not:
<html>
<head>
<title>…</title>
…
<head>
<body>
<div>
<div>…</div> <!-- which nesting level ??? -->
…
</div>
…
</body>
<html>
It does not matter in functionality, but for the purpose of clean, readable and manageable code you should always indent child tags.
I teach an introductory course in web design and have quite a challenge to explain to students why indentation is important especially for someone new to HTML. I often show them the DOM diagram from the W3schools website as an example of the tree structure which is an HTML page. In my honest opinion, although knowing full well that it does not make a difference in the slightest, indenting both the <head></head> and <body></body> helps to show the HTML tree structure better. As someone above said, indentation makes for clear readable code but not just, <head> and <body> are both children of <html> and thus should be indented to show this fact.
Instead of this:
<html>
<head>
</head>
<body>
<h1>That's 2 levels of indenting and we haven't even started yet.</h1>
</body>
</html>
Or this (nobody knows why people started doing this):
<html>
<head>
</head>
<body>
</body>
</html>
I'd like to propose another style. A three-line general structure:
<html><head>
</head><body>
</body></html>
Insert some HTML:
<html><head>
<style>
</style>
</head><body>
<div>
</div>
</body></html>
In this case, we get rid of an indentation level in a natural way (because a double indentation wouldn't make sense). It's the head and body elements that cause indentation of its content.
Editing a README.md for a git repository. But I want to embed raw HTML into the the readme. I'm using Markdown, which is an excellent tool. Yet, the code just keeps showing up as rendered HTML.
How do I keep it Raw?
And formatted like code?
Here it is if you're curious:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome</title>
</head>
<body>
<h1>Django Site</h1>
<hr />
<p>Thanks for visiting.</p>
</body>
</html>
The heck? It works here.
I suppose you are on GitHub.
GitHub only allows certain HTML elements and attributes inside their markdown: all others are stripped to prevent XSS and defacing.
And of course, <body> is one of the forbidden tags as it would make the HTML invalid if present (a body inside a body)
This is documented at: https://help.github.com/articles/github-flavored-markdown/#html
Use "`" This Sign To Use Raw Code Snippets
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome</title>
</head>
<body>
<h1>Django Site</h1>
<hr />
<p>Thanks for visiting.</p>
</body>
</html>
It Will Allow A User To Copy Your Code Directly From Your README.md File In Github By Just Pressing A Button !!!