This question already has answers here:
What are the new frames? [closed]
(3 answers)
Closed 9 years ago.
I'm ultra newbie in html/css/whatever in web and I'm trying to build my own website. Let's say I have two parts of my website - top with logo and menu, and bottom with the content. Which tools do i need to keep this separately? I mean - only one file with 'upper things' (because I don't want to edit it on every subpage) and other files with subpages? Do I need php for this?
Is a good thing to use<iframe> in my case?
A server side language like php is the way to go. A server side language will give you the ability to do what is called a server side include.
So for example you can create one file called header.php and place all your code from the opening <html> tag to whatever else will constantly be at the top of your website. You might want to take this even further and create a footer.php to put all the code that will constantly be at the bottom.
Example header.php
<!doctype html>
<html>
<head>
<title>My Awesome Website</title>
</head>
<body>
<header>
<nav>
<ul>
<li>Menu Link 1</li>
<li>Menu Link 2</li>
<li>Menu Link 3</li>
</ul>
</nav>
</header>
<div id="main">
Example footer.php
</div><!-- end #main -->
<footer>
My Awesome website's Footer content!
</footer>
</body>
</html>
Now to put them together on our homepage or index.php
Example index.php
<?php include 'header.php'; ?>
<h1>Welcome to my home page!</h1>
<p>This is my super awesome site and I hope you like it!</p>
<?php include 'footer.php'; ?>
The final output sent to the browser would be the following:
<!doctype html>
<html>
<head>
<title>My Awesome Website</title>
</head>
<body>
<header>
<nav>
<ul>
<li>Menu Link 1</li>
<li>Menu Link 2</li>
<li>Menu Link 3</li>
</ul>
</nav>
</header>
<div id="main">
<h1>Welcome to my home page!</h1>
<p>This is my super awesome site and I hope you like it!</p>
</div><!-- end #main -->
<footer>
My Awesome website's Footer content!
</footer>
</body>
</html>
If you want to do it purely in HTML then the only way of doing it via iframe, but it is not the best way and discourage by many developers because you loose deep link, since whole site has the same address.
The better option would be to use server side programming model such as PHP, ASP.NET, Ruby...
No you don't have to use php for this. You can also use general ssi include files if you'd rather not use php. Using php requires a server that is set up to parse for php (that's another topic :). An example might look like...
<body>
<div id="header">
<!--#include file="includes/header.ssi"-->
</div>
<div id="menu">
<!--#include file="includes/menu.ssi"-->
</div>
<div id="footer">
<!--#include file="includes/footer.ssi"-->
</div>
</body>
As the include file path suggests, there is a dir called 'includes' in your root folder from which your ssi content is called. The ssi files are using regular html markup and any IDs or CLASSes still obey your css.
Related
I created a website for my mom a while back and I finally want to make it cleaner and make a universal header and footer so that I only have to change the one document when I update it instead of every page. I spent a while looking around, but I was unable to make anything work. I have a good understanding of HTML and CSS, but I'm pretty much a novice and haven't really used javascript, if thats what this entails, so detailed help would be really appreciated! How do I go about this? (If it matters, the website is hosted on DreamHost).
Here is the basic HTML code I have for the header and footer:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style/style.css">
</head>
<body>
<div id="wrapper">
<header>
<img src="img/logo.png" alt="(logo)">
<nav>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>PRODUCTS</li>
</ul>
</nav>
</header>
<footer>
<p> Email: email#gmail.com </p>
<div id="logo">
</div>
</footer>
</body>
</html>
You can use a library like react or a framework like angular 2 or vue js to extend the HTML
You could use PHP to do this. You would simply include header.php for example. It is possible to use any other server-side code.
It is also possible with JavaScript, but keep in mind that JavaScript is executed on the Client side, so that some users could experience issues due to deaktivated javascript inside the browser.
MY SERVER IS TOO BASIC TO SUPPORT PHP/JAVASCRIPT, ANY SUGGESTIONS?
I have a HTML website with multiple pages. I am using an identical menu on all pages and when I add a page I have to each page and edit the code.
I am wondering is there a way of adding a menu page that can be called?
I am using CSS/HTML is it possible to do anything to help? I have researched a bit and I think it involves PHP, but can PHP be used in conjuncion with CSS/HTML?
You can have the code for your menu in a separate html and call it in all your other html files
<html>
<head>
<title>test page</title>
<script src="http://code.jquery.com/jquery-3.0.0.min.js"></script>
</head>
<body>
<div id="header">
<div id="menu">
</div>
Rest of the Header Content
</div>
<br />
<div id="content">
Main Content
</div>
<br />
<div id="footer">
Footer Content
</div>
<script>
$("#menu").load("menu.html");
</script>
</body>
</html>
You have to use php to be able to do that.
Do 2 separate files, one will be your index.php and the other menu.php
To include menu.php you have to add :
<?php include '../elements/menu.php'; ?>
in your index.php.
All your other elements still can be coded in HTML even if your new extension is .php
You include this menu on all your website pages and if you want to add a page, you just have to add the link in menu.php and it will appear everywhere.
just use #Html.Render("pagename.html");
Below is an attempt to link pages together using a menu.
<html>
<head>
<title>Home</title>
<link href="index.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<article id="logo_section">
<img src="webpage_logo.png" alt="logo.png">
</article>
</header>
<nav>
<ul>
<li>Home
</li>
<li>Gallery
</li>
<li>About Us
</li>
<li>Contact us
</li>
</ul>
</nav>
</body>
</html>
My idea was to link pages together in a navigation bar and a logo.
All of the HTML pages are within the same folder and they are spelt correctly in the references. I checked.
First off all, your code for linking has no problems, so everything points at you forgetting to create the files in the same directory, or not creating it at all.
Also, you haven't declared your document (done using at the top of your page), so the browser will just assume that it is html 4.01, and since is new in html 5, your nav tag doesn't do anything, I could mention a couple more errors, but you can locate them yourself here: https://validator.w3.org/#validate_by_input
I have two HTML documents that will be linked to the same site. How do I create a navigation menu that I will only need to edit once, for its changes to be applied to all HTML documents that menu is on?
I'm a beginner to HTML and have learnt the basics, but could you please help?
This is the menu code:
<ul>
<li>Home</li>
<li>About</li>
<li>Videos</li>
<li>Games</li>
<li>Apps</li>
<li>Contact</li>
</ul>
You will not be able to do this with just plain HTML.
Few Options :
Javascript - Using javascript you could append the navigation to each page.
PHP - Using PHP would be easiest and you could process your navigation as an include to your code.
In my opinion you should use php.. JavaScript is way overkill for this particular situation. What I typically do it create a series of php files that form the structure for my websites.
A Simple structure would be
head.php
index.php
create a php file named head.php, you can do this using notepad, notepad++, netbeans etc..
head.php
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!-- NAVIGATION SECTION HERE -->
<div class="nav">
<ul>
<li>First link</li>
</ul>
</div>
index.php or your other pages
<?php include "head.php"; ?>
<div>
content of html page
</div>
<div class="footer"></div>
</body>
</html>
If you notice at the top of index.php you see an include statement. This will add the head.php contents to any page that you call this include from. Since your navigation section is located in head.php, your navigation will be uniform throughout all of your pages.
For this to work, please make sure that your host allows you to use php.
If I understand correctly you need to include some HTML file to another.
With HTML less 5-th version you can't do this without javascript. The best solution to use jQuery if you don't want use PHP/Java/.NET solutions. But don't forget that you will need use local server (for example, Apache).
index.html:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" />
<script type="text/javascript" src="script.js"/>
</head>
<body>
<div id="menu">
</div>
</body>
</html>
script.js:
$(document).ready(function(){
$.get("menu.html", function(data) {
$("#menu").html(data);
});
});
menu.html:
<ul>
<li>Home</li>
<li>About</li>
<li>Videos</li>
<li>Games</li>
<li>Apps</li>
<li>Contact</li>
</ul>
JQuery: jquery.com
Docs: api.jquery.com/html
I am making a website with only two main pages which are "Index" and "About me" pages. After making the templates and everything, I came across a confusing problem where I couldn't really edit the Css style of the about page.
Basically my About and Index page got the same template from my main Html (the one made from scratch) Which i thing it's fine there .. but I would like My About page to have a different look from my Index page, Everytime i make a change on the Editable region that I would like to make disappear from the About page, It also Affects the INdex page. Same for the Stylesheet, I want different colors on the about page but it seems like everytime i do something it affects the whole site.
Here is the picture of the site i made so far.
Homepage and about page
Both pages have the same template, same editable region and the same css and look exactly the same way at the moment but I would like to remove the div class:"notes" from the about page and expand the width of his div id="main-content" change completely almost every even the colors i mean the whole style of the about page, without affecting the Homepage and leave it as it is .. what should I do? Please
Thank you
PS: i am using Dreamweaver cs6.
main dwt html/ same html for the about and index page only difference is the for index and about are not editable
<code>
<!doctype html>
<html>
<head>
<!--JavaScript that enables Internet Explorer (version 8 and below) to recognise HTML5 elements -->
<script type="text/javascript">
document.createElement ('article')
document.createElement ('nav')
document.createElement ('aside')
document.createElement ('header')
document.createElement ('footer')
document.createElement ('main')
</script>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/timothy.js"></script>
<link href="../css/stylesheet.css" rel="stylesheet" type="text/css" media="screen">
<meta charset="utf-8">
<!-- TemplateBeginEditable name="doctitle" -->
<title>My Uni Website</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>
<body>
<!--Write web page content and markup within the 'body' tags -->
<div id="outer">
<div class="frame">
<div class="fade"></div>
<img src="../images/huxley.jpg"/>
</div>
<div id="wrapper">
<!--The 'wrapper' div contains all the page content and can be styled -->
<div id="icon">
<ul>
<li><img src="../images/twitter.png" width="20" /></li>
<li><img src="../images/behance.png" width="20" /></li>
</ul>
</div>
<div id="logo"><a href><img src="../images/logo2.png" width="209" height="207"/></a></div>
<!--The main heading for the page -->
<header>
<!-- <h1>CI135 Learning journal</h1> -->
<h2> How I mastered web standards in 10 weeks</h2>
</header>
<!--The primary navigation for the page -->
<nav>
<ul>
<li>HOME</li>
<li>ABOUT ME</li>
</ul>
</nav>
<!--Secondary sidebar navigation -->
<aside>
<div class="image"><img src="../images/information.png" width="100"/></div>
<div class="aside">
<!-- TemplateBeginEditable name="aside" -->
<h3> The Weekly posts </h3>
<ol>
<li>Getting started</li>
<li>Learning more about tags</li>
<li>Learning about lists and tables</li>
</ol>
<h3> Favourites</h3>
<ul>
<li> W3C markup validation service </li>
<li> Web platform Docs - Web development for beginners </li>
<li> Html5 Doctor - Helping you implement HTML5 today </li>
</ul>
<h3> Basic Definitions </h3>
<dl>
<dt><strong>HTML</strong></dt>
<dd>Hyper-text markup language - markup language used to structure content</dd>
<dt><strong>CSS</strong></dt>
<dd>Cascading stylesheets - used to tell browsers how to present HTML elements</dd>
<dt><strong>JavaScript</strong></dt>
<dd>Scripting language for adding interactive behaviour to web pages</dd>
</dl>
<!-- TemplateEndEditable -->
<h3> My time table </h3>
<table width="523" height="81" border="1">
<tr>
<td width="71" height="23" bgcolor="#FFFFFF">Day/Time</td>
<td width="215" bgcolor="#FFFFFF">Monday</td>
<td width="215" bgcolor="#FFFFFF">Tuesday</td>
</tr>
<tr>
<td height="25" bgcolor="#FFFFFF">9-10 am</td>
<td> </td>
<td>Lecture</td>
</tr>
<tr>
<td height="23" bgcolor="#FFFFFF">10-11 am</td>
<td>lecture</td>
<td>Lab</td>
</tr>
</table>
</div>
</aside>
<!--The main page content -->
<main><!-- TemplateBeginEditable name="mainContent" -->
<article>
<!--Content node -->
<div class="header">
<h1>Week 3: Tables, link images, quoting text </h1>
</div>
<p>In the first 3 lab tutorials I learned some of the most frequently used HTML tags and how to use them to structure text in a web page. <br>
PS: ADD MORE COMMENTS ABOUT WEEK 3. </p>
</article>
<article>
<div class="header">
<h1>Week 2</h1>
</div>
<p>PS: ADD COMMENTS ABOUT WEEK 2.</p>
</article>
<article>
<div class="header">
<h1>Week 1</h1>
</div>
<p>ADD COMMENTS ABOUT WEEK 1. </p>
<p>In the first 3 lab tutorials I learned some of the most frequently used HTML tags and how to use them to structure text in a web page. <br>
PS: ADD MORE COMMENTS ABOUT WEEK 3In the first 3 lab tutorials I learned some of the most frequently used HTML tags and how to use them to structure text in a web page. <br>
PS: ADD MORE COMMENTS ABOUT WEEK 3In the first 3 lab tutorials I learned some of the most frequently used HTML tags and how to use them to structure text in a web page. <br>
PS: ADD MORE COMMENTS ABOUT WEEK 3In the first 3 lab tutorials I learned some of the most frequently used HTML tags and how to use them to structure text in a web page. <br>
PS: ADD MORE COMMENTS ABOUT WEEK 3In the first 3 lab tutorials I learned some of the most frequently used HTML tags and how to use them to structure text in a web page. <br>
PS: ADD MORE COMMENTS ABOUT WEEK 3</p>
</article>
<!-- TemplateEndEditable --></main>
<div id="right_side_note">
<div class="post"><!-- TemplateBeginEditable name="SideNotes" -->
<h2>Notes</h2>
<p class="date">March 22, 2011</p>
<p>The W3C defines HTML and CSS as follows:</p>
<blockquote>
<p>HTML (the Hypertext Markup Language) and CSS (Cascading Style Sheets) are two of the core technologies for building Web pages. HTML provides the structure of the page, CSS the (visual and aural) layout, for a variety of devices. Along with graphics and scripting, HTML and CSS are the basis of building Web pages. <br>
<cite>W3C standards for web </cite></p>
</blockquote>
<!-- TemplateEndEditable --></div>
</div>
<div id="footer">
<!--Footer content -->
<p class="footer-text">© 2013 Daniel Biakath / University of Brighton.</p>
</div>
</div>
</div>
<!--Close 'wrapper' div -->
</body>
<!--Close 'body' -->
</html>
<code>
You should create two separate CSS files and put the styles for each page into the separate files, say about.css and home.css. From the about page, link to the about.css and from the home page link to the home.css.
A CSS link should look something like this:
<link rel="stylesheet" type="text/css" href="home.css">
CSS files are loaded in order so you will need to take that into consideration if styles are supposed to override each other. If the following is declared in the head and both files have a style with the same name, the style in the home.css file will be used. You might not be seeing changes made to the about.css if this is the case. The most important CSS file should be listed last.
<link rel="stylesheet" type="text/css" href="about.css">
<link rel="stylesheet" type="text/css" href="home.css">
If your styles are currently inline and look like this:
<style type="text/css">
/*YOUR STYLES HERE*/
</style>
you can make the changes in each file directly or if you want cut everything from inside the tag and put it in the appropriate css file.
If after making changes to your CSS nothing is happening, it is possible, depending on the system you are using, that cache is coming into play. Even though you make changes, the version served by the web server is the same. CSS files seem to do this a lot to me if I'm not careful. If that's the case, reset the website and clear browser cache and you should be good to go.