I've been googling for quite a bit and can't find anything that helps me put all the pieces together here. My specs are as follows:
Have three files: index.html, menu.html, and style.css
The menu.html has all the content needed for my menu, and is included by index.html via html5 objects. I understand objects can be used like this: Include html file in html using html5
style.css can have be very very minimal. Maybe just blue text on a red background, as an example.
What I have managed to accomplish:
Getting the text from menu.html to show up in index.html
My issue is just putting all the pieces together. If someone could help provide the needed lines for index.html (ie, an object tag that correctly references the style) and a very minimal style.css, I would be all set.
Thanks for the help, and sorry for the n00b question, but I can't seem to find anything on the combination of html5 objects and css.
index.html:
http://pastebin.com/xn2PNAsS
menu.html:
http://pastebin.com/A72csf14
style.css:
http://pastebin.com/QXxwbpyq
What is broken:
I just can't get the object only (the menu) to use the style sheet and have a red background. For the main page I would like to have a white background.
Clicking on a menu link seems to open the page in a new frame. I want the entire page to change. The reason for having a menu.html is to stick with the DRY paradigm.
Have you tried something like this?
<object type="text/html" data="menu.html" id="whatever"></object>
In style.css
body {
background-color: #FFFFFF;
}
#whatever {
background-color:#ff0000;
}
In menu.html use target="_top" on your links, from http://www.w3schools.com/tags/att_a_target.asp ie,
Home
Props for wanting to keep it DRY. If you want to include those sorts of common components, however, and you want to do it cleanly, you may need a lot more than HTML and CSS. You would need a programming language (and possibly a web app framework) that you could use to generate the common elements. Popular options are C#/ASP.NET, Python/Djano, Ruby/Rails, and PHP/Zend or Cake.
However, I can't really tell you exactly what you need because I don't know what kind of site you want to make, or how big of a project it is. You may just be able to get away with server-side includes, which is probably the easiest option.
Related
I have used HTML in its basic form, and I mainly work on "server side" (of Enterprise application, mainly based in Java EE).
From what I understand, HTML is the "pages" which we see in an browser (that source code which a GUI developer writes and which a browser renders appropriately).
For example in an HTML tag, we write "h1" element, and the browser displays the text within as bold.
Now why there is any need of css? From what I am aware of, CSS is used to give "style" to a html page. The confusion that I have, doesn't HTML in itself able to give the style? what were the compelling reasons for creation of css?
Can anyone help me understand this in simple words.
The code that you put in your html to style it is actually CSS. HTML actually has some built in CSS. So really, you are using CSS when you do that. Also people like to connect a separate file for CSS in bigger projects. It looks more organized, and it easier to keep track of. It is also easier to code the CSS, because it is less messy and it seems like you have a bit more functionality. In conclusion, the code in the html that you are using to style with, is actually CSS, just built in. Also, I would highly recommend separating your stylesheet and HTML file(the stylesheet is CSS). If you need help, go to codecademy and create an account. Take the HTML and CSS lesson. I found this very useful and is where I learned most of my knowledge. I would highly recommend going to that site also. The site is also free.
To start off with I can only use HTML and/or CSS. I do not have the capacity to use PHP or JavaScript?
I have researched an iFrame, but I'm not sure if it is possible to have a dropdown menu with an iFrame?
There's a very old-hat way of doing this called framesets, beware this is very old, doesn't look great and I'm not sure if it'll work well with dropdown menus e.t.c.
http://www.w3schools.com/tags/tag_frameset.asp has more on it.
Other than that the only thing I can think of is using PHP includes (which in you mentioned you don't have the capacity for) although I can go into detail about using PHP includes if need be.
Alternatively just repeating the menu code in each html page is the only other option as far as I know.
I personlally don't know a way which is just done with a HTML and CSS. But there is an easy way with PHP.
You make a file (nav.php) where you put your navigation stuff into it.
(Don't forget the php tags):
Now you can include the file in any HTML Document:
<?php include_once "filePath"; ?>
With just html&css, I only know copy&pasting. But with your wording, it sounds like you want just one menu like menu.html and linking it onto the multiple pages where you if you were to change the menu, you only need to change it in one section and don't need to copy and paste the rest. Since you want 1 single menu and link it to the multiple pages, I suggest the php way as Lorenz mentioned.
http://www.w3schools.com/php/php_includes.asp
...or another way I saw someone else do it is somewhere in this video by DevTips:
https://www.youtube.com/watch?v=nZoUA-98fL4
its something like {% filename %} but idk what lang. or whatever that's suppose to be. He just made his code look so much messier to me that I didn't bother looking into it.
i'm a beginner in web programming, and i need to create a web site for a school project.
In my website i want to have this view:
that i saw on a website.
how do i get the html of that?
Use your browser's tools!
First, as you mentioned "views" – "views" don't exist in HTML. But there are tags. Common tags are ..., <strong>bold text</strong>, <div>...</div>, ... What you want is to grab a tag with several child tags.
In Firefox, there's a tool called Page inspector. It'll let you inspect the site's source code interactively (e.g. you hover over a tag and it'll be highlighted). With that, you can easily find the needed HTML tags. But you also need the CSS styles for each tag. If you click on a tag, the CSS styles are shown on the right. You have to copy them to your stylesheet and maybe you'll have to modify them to match your different HTML structure.
There's something similar in Chrome, too.
But please note that it's not very nice to simply copy-paste this code without modifying it. It's a good idea to discover how you can do something like this, but I strongly recommend to change it, to have something own!
I'm new at HTML and need to do a simple site as an assignment. For the site navigation menu I guess it would be easy to simply copy and paste the navigation menu HTML onto all the pages in a header div. But is there a better way to do this?
for example, is there an easy way (that doesn't require scripting) to only write the code in one place and have it included on every page? I remember that I did something in Dreamweaver that created a template page that included the navigation menu. However I have a feeling that that was just copying html between pages.
Without scripting your HTML files will need to contain the menubar in full.
You are describing what a server side scripting language can do. Without one - your HTML files are served as they are. Therefore they must contain the HTML for the menubar within them.
The comments mention using an iframe - though very creative - I believe it doesn't satisfy as being "a better way to do this"
You have must use HTML code every page without HTML does't work Try to learn some basic PHP it will help
I know something like this is possible, I'm pretty sure I'm just wording it wrong as I've been searching online for hours to no avail.
The same way an HTML page refers to the CSS file for a menu design, how can the HTML page also refer to a file (or the same CSS file if possible) to get the links information? So when I change the link information in that one file, it changes links on all HTML pages referring to it. Is this possible?
There is no simple way to do this. In general this happens server-side and is drawn from a database.
You CAN draw this data from a JavaScript file, using HTML templating without having to depend on a server. This may help.
http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-an-introduction-to-jquery-templating/