So i have an HTML file my problem is i want to create an "About Me" section in one DIV section, the issue is the About Me section is rather long and contains a lot of text and as a result of that makes the code look untidy. I mean from a functionality point of view it works but i like making HTML files look as good as i can.
Is there someway i can link my about me section from a separate HTML file containing just that info, almost has is if it was a separate class in OOP and i am in essence just calling to an 'About Me' object?
You can simply use an <iframe> for that, pointing to your other HTML file.
<html>
<head>
..
</head>
<body>
...
<iframe src="link/to/your/file.html" scrolling="no" frameborder="0" ></iframe>
</body>
</html>
Related
so I have this huge amount of text from several documents that i'd like to insert on my webpages. When i copy paste the text into my <p>element, it works fine and all, but it looks messy in my html-file.
Is there any other way to transfer my written document to my html-file, for instance link the document to the html-file, or maybe there's a way to hide or separate the <p> so the html-file looks neat even though there's a huge amount of text in my html-file. Any advice?
I do not know about any way to include html in another html (something like php's include), but it could be done with JQuery:
index.html:
<html>
<head>
<!-- link jquery -->
<script>
$(function(){
$("#fileContent").load("doc.html");
});
</script>
</head>
<body>
<div id="fileContent"></div>
</body>
</html>
doc.html (file that contains your text)
There's a lot you could do to separate these blocks of text.
Firstly, I'd recommend using <div>..</div> tags to divide the content into separate semantic sections. There are a bunch of different tags that aim to divide the content of the page semantically: <aside>, <main>, <header>, <nav>, and so on. I'd recommend reading up on these tags and using them appropriately.
However, to answer your question more directly, you should separate each block of text into separate <p> tags. After all, the <p> tag is meant for defining separate paragraphs. While the HTML document may not look pretty when indented and filled with multiple different tags like <div> a <p>, it is the best way to do it.
Unless the HTML page is going to be presented in its core (code) format, then how the <p> tags look in the .html file is unnecessary because after all these are what define how the page is presented and rendered in the browser.
Let's say all of my html pages will have a top bar and banner with the same content.
Rather than copy the code for these content on all html pages, is it possible to have pages inherit the content from a base html page?
For example : base.html can have the top bar, banner, etc (all repeated content)
Remaining pages (index.html, about.html, etc) can inherit the content from base.html and then add more content.
Is this possible in html or do I have to copy and paste repeating content all the time?
In this situations (as far as I know)
You can use template based editors like Dreamweaver
You can use framesets (don't use them)
You can use iframe (meh.)
You can convert your files to PHP and just use a single include command (Y)
Copy and paste whole thing and when you get 100 pages, try to add a new menu...
I'd like to see other solutions too.
Example:
Lets say I've created a template.html it's something like
<html>
<head>
<title>asd</title>
style tags keywords bla bla bla
</head>
<body>
<div class="menu">
yeah I've my menu here well designed
</div>
<div class="content">
unique content here
</div>
</body>
</html>
Allright this is my one html file. Lets take top section of the page. Menu will be same but content will be changed so this is top of the page:
<html>
<head>
<title>asd</title>
style tags keywords bla bla bla
</head>
<body>
<div class="menu">
yeah I've my menu here well designed
</div>
Save this part as top.php Now let's see what have we left:
<div class="content">
unique content here
</div>
</body>
</html>
This will be our post page. But how can we get codes from top.php? Just like that:
<?php include("top.php"); ?>
<div class="content">
unique content here
</div>
</body>
</html>
Now, save this as page1.php BINGO! You did not wrote anthing about menu but include method will bring it for you.
Include basically writes everything from a file to another. You can check differences for include_once, require, require_once too.
Allright, we've created our first page. What about second one? Exactly the same:
<?php include("top.php"); ?>
<div class="content">
my second page here
</div>
</body>
</html>
Save this as page2.php
Well, you need to change your menu now but there are two pages, two hundred pages, two million pages... Who cares. Just change top.php that's all.
Please note that in this codes; top.php, page1.php and page2.php are in SAME directory. If you want to include from another path, you must use for example:
<?php include("../top.php"); ?>
//OR
<?php include("myFiles/theme/top.php); ?>
depending on your path.
I hope this helps. Read PHP guides for include. It's really easy.
You need a testing server (or you can use a local server like WAMP, XAMP etc.) to execute PHP files.
You can create template page and include it to the all new pages as javascript
<script type="text/javascript" src="includes/template.js"> </script>
Same way with php - using include
i am a beginner in html. i would like to do something like this,I am using the below code to create tabs, now i have the contents of the section in a different html file. Please tell me how to load that html file inside the section.
<html>
<head>
<link rel="stylesheet" href="tabs.css">
<body>
<article class="tabs">
<section id="tab1">
<h2>NewRecord</h2>
<p>This content appears on tab 1.</p>
</section>
</article>
</body>
</head>
</html>
Option 1
Use iframes to archive this. It will display another page.
Option 2
Use Ajax Example
HTML is the structure, CSS is the style (appearance), and JavaScript is the behavior. You can't load data with just structure alone, you'll need to introduce some scripts in there. jQuery is a common library that's fairly easy to learn, but there's many available.
You can load the content from another HTML file via jQuery '.load()' method.
Step 1 - Include jQuery in your code.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Step 2 - Add this code before the closing </body> tag.
<script>
$(document).ready(function() {
$('#tab1').load('html-file-1.html');
});
</script>
Step 3 - Your external html file html-file-1.html contains nothing but simple html tags to represent the content you want to load within the section.
I would like to know that if there is a way that a certain piece of HTML code change on every page I create. In simple words for example, I make a HTML page called 1.html and add a footer code. For example <div class="footer">, and I need to add this footer to every page I make. But then, I don't wanna add this footer code manually on every page since that would take time.
So making it more simple, I make 1.html, 2.html and 3.html and make footer.html and add footer code to it. So instead of adding the actual footer code on every page, I add footer.html to 1.html, 2.html and 3.html and then later edit footer.html that will update on 1.html, 2.html and 3.html.
Hope you get my point.
Thanks.
There is no way of doing that in plain HTML. You either have to use a scripting language (like Python, Ruby, PHP...), or a static website generator like jekyll or hyde.
If you are just writing static HTML files, I would go with the second approach.
You can use a server side language like PHP to do that
1.php
<html>
<body>
Title 1
<?php include('footer.html') ?>
</body>
</html>
2.php
<html>
<body>
Title 2
<?php include('footer.html') ?>
</body>
</html>
If your webserver supports it (many do), you could use Server Side Includes.
rough summary:
change the extension on your html file to .shtml
add this to your page wherever you want your footer to appear
<!--#include virtual="../path/to/footer.txt" -->
the footer file should only include the HTML fragment that you need to replace the SSI tag, so that when the tag is replaced with the footer you have a well-formed HTML page
In your pastebin example your 'footer.txt' file should contain this:
<div class="footer">
bla bla here....
</div>
And your .shtml file, in which you want the footer to appear, should look something like this
(this assumes that your footer.txt file is in the same folder as the .shtml file)
whether you use php or ssi remember that 'footer.html' must only be the code that would appear between the 'body' tags in a normal html page, or you will duplicate.
Working on a project, one of the webpages will display a list of people (specifically, a list of people from a graduation class that haven't been located yet).
Instead of manually updating these lists in tables which is a boneheaded Web 1.0 way of doing it, I'd like to take the submitted list of names, convert them to a simple .txt list, and then display that list on the webpage.
So far, the easist way to do this is to use an iframe element... only thing is, I cannot (or don't know how to) apply any text styling to the contents of the iframe. I've published a sample of what I've been able to accomplish here: http://dongarber.com/test//helpus-iframetest.html
The default font is courier, and the client probably ain't gonna be too keen on it.
Is there a better way to do this, that's doesn't require ASP.NET or a database?
#list p {
font: arial;
font-size: 14px;
}
...
<p>Help us locate all of our classmates from the High School class of 1961. If you know where they live or their e-mail addresses contact the Reunion Committee.</p>
<p> </p>
<div id="list"><p><iframe src="missingmen.txt" width=200 height=400 frameborder=0 ></iframe></p></div>
</div>
Easy way:
Rename missingmen.txt to missingmen.html.
Add a single line to the top of missingmen.html:
<link href="txtstyle.css" rel="stylesheet" type="text/css" />
Create a file called txtstyle.css, and add to it a line like this:
html, body {font-family:Helvetica, Arial, sans-serif}
In more recent browsers code like below may be enough.
<object data="https://www.w3.org/TR/PNG/iso_8859-1.txt" width="300" height="200">
Not supported
</object>
I find that if I try things that others say do not work, it's how I learn the most.
<p> </p>
<p>README.txt</p>
<p> </p>
<div id="list">
<p><iframe src="README.txt" frameborder="0" height="400"
width="95%"></iframe></p>
</div>
This worked for me. I used the yellow background-color that I set in the stylesheet.
#list p {
font: arial;
font-size: 14px;
background-color: yellow ;
}
If you just want to throw the contents of the file onto the screen you can try using PHP.
<?php
$myfilename = "mytextfile.txt";
if(file_exists($myfilename)){
echo file_get_contents($myfilename);
}
?>
How are you converting the submitted names to "a simple .txt list"? During that step, can you instead convert them into a simple HTML list or table? Then you could wrap that in a standard header which includes any styling you want.
That's the code I use:
<?php
$path="C:/foopath/";
$file="foofile.txt";
//read file contents
$content="
<h2>$file</h2>
<code>
<pre>".htmlspecialchars(file_get_contents("$path/$file"))."</pre>
</code>";
//display
echo $content;
?>
Keep in mind that if the user can modify $path or $file (for example via $_GET or $_POST), he/she will be able to see all your source files (danger!)
You cannot style a text file, it must be HTML
Most easy and simple way to show file on your web page
Here is a screenshot. You can see here a pdf and txt file.
Sample Screenshot of TXT file rendered on HTML using iframe.
<iframe
src="full_file_path_here"
frameBorder="0"
class=""
scrolling="auto"
height="100%"
width="100%">
</iframe>
You can add it as script file.
save the txt file with js suffix
in the head section add
<script src="fileName.js"></script>