As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I will create a webpage that has a sidebar, and the sidebar will have links to other pages and stuff. The way I am coding, for each link on the sidebar, I have another HTML document. The sidebar links just link to another .html file, which contains the website template/layout whatever you want to call it. So I have an index.html that is the home page, then an about.html, etc. And for each of the html documents, the file contains the code for the layout of the entire website (the sidebar, footer, etc). So between the different links that the sidebar links to, the only difference is the content. So if I want to change the layout of my webpage (the color of the sidebar, for example) I will have to go to each HTML document and change it.
So my question is how are people supposed to go about doing this? I don't think I am doing it correctly. Are you just supposed to have one file that contains the template?
Moneydev,
What you are looking for is a templating system. If you want to stick with pure HTML you'll have to use external tools to help you because it doesn't have a built-in way to template. Dreamweaver has the capacity to allow you to define areas inside your webpages to indicate they are the same area, to be maintained "as one" throughout your entire website.
The way that works though, is actually pretty low-tech. What it does is search through ALL the files in your Dreamweaver managed website and "search and replace" the section when you edit it from the "master location" which is determined when you set it up in the first place.
Ali Hamze suggests using 'includes' inside PHP projects. That is the common approach for PHP, but I'm biased and much prefer ASP.NET's answer to templating. It is a combination of ".master" (pages) and ".ascx" (controls) that allow you to template and re-use these in nested fashion. It is FAR beyond a simple "search and replace" (as done by Dreamweaver with your HTML) but would require you learn a new development environment.
So what it boils down to, is you can stick with HTML which will be far simpler and allow you to focus on learning HTML/CSS and JavaScript. This is great to build a foundation for development... however, to really move into the "big leagues" I'd recommend choosing an IDE.
As a long time Windows guy, I do favor ASP.NET via Microsoft Visual Studio and Microsoft SQL for the databases. That said, I'm the kind of person that can drink Coca-Cola, and still like Pepsi. If you'd like to look into PHP or Java, those are great options too. Here are places I'd go if I wanted a FREE and powerful IDE to get my web development life off to a healthy start:
ASP.NET (Microsoft Visual Studio) --- Read about 'Master pages' and 'Control files' for templating
http://www.microsoft.com/express
(I prefer Microsoft SQL (Express Edition is fine) for databases, though you CAN use mySQL if you like)
PHP (Eclipse IDE for PHP) --- Look into 'includes' for templating
http://www.eclipse.org/projects/project.php?id=tools.pdt
Java (Eclipse IDE for Java) --- Look into 'http://www.stringtemplate.org/' for templating
http://www.eclipse.org/downloads/packages/eclipse-ide-javascript-web-developers/indigosr2
(for the above, if you want a database behind the scenes, check out mySQL)
http://www.mysql.com/
FYI: You might find Microsoft's IDE the least intimidating, though PHP isn't too tough to start with. Java may be challenging if you're new.
Happy coding!
You should look into PHP which will allow you to have a file for the header, another for the sidebar and all other stuff which will be the same on all pages. Then you just include it in the index.php, about.php.
Keep all your styling in an external CSS stylesheet that is referenced in the head of each html page. Then, you can change the styling in one place. This addresses your example of changing the sidebar color.
If you want to keep a consistent html structure for the sidebar on each page, use php. You would create a file called sidebar.php, and use the include method to import the same code into each page. If you want to change it later, edit the single sidebar.php file, and all the others will import the new code.
Many answers to that. The most typical is to use a server-side language that preprocesses the HTML. This way you can have a general layout file and separate "views". The views only contain the unique content for each page, the layout contains the essentially unchanging wrapper around it. You can then piece those two together as needed without code duplication.
Learn any server-side language you find interesting, from PHP over Ruby to Python or *.NET.
The solution to this, for me, is a little server side scripting in a language called PHP. I create header.php, footer.php, and in your case, I'd create a sidebar.php file as well.
So what's PHP? It's a scripting language and it's extremely useful. In your case, it's not really that important, but you can do a super handy thing with it - include other files. Your web server has to have PHP installed and running. You can also run it on your local PC with a great free tool called Xampp.
So when I got started, I'd create a file called index.php. In that file, I'd start with a head section as usual. Include your CSS (You are making CSS files, right? It's way better than a style section - you can re-use that same stylesheet and it has a few other benefits as well.) and set up any scripts if you are using them. In the body, you'll use a special PHP tag to run a little bit of PHP code:
<?php include("header.php"); ?>
That will "include" the file called header.php. Whatever you put in there is now part of this document when you load it. It can be plain PHP, HTML, or even plain text. Use it to set up your header. At the bottom of the page where your footer goes, use a little more PHP:
<?php include("footer.php"); ?>
In footer.php, you guessed it - put your footer code. Then close the body tag and the html tag. You can also include your sidebar with this same technique. I suggest any HTML tags you open in the included file also close in the same file. It will make it easier to manage the individual pieces of your pages.
This is about the simplest thing you can do with PHP, but it's a really handy technique for making reusable parts of a site. You'll save tons of time and effort once you master it.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
So I recently finished the HTML and CSS course at Codecademy, and I want to practice coding with html and css. My problem though, is that I don't know where to start. I've been searching around to try and find the information I need, but I can't find anything. I kind of feel like it's so obvious noone's ever needed to ask, but I don't know, so here I am, asking.
While searching for the answer to this question, I could only find sites that teach how to use html and css, like Codecademy, and sites that let you test html code like w3schools.com, but no sites that let you practice html and CSS.
Here's my question:
Are HTML and CSS created as .html and .css files on my computer?
You should ask new question for each of the questions you posted.
Where do I code html?
You can use any text editor. Try Sublime Text - download the app for your operating system and install.
Create a new file, saving it with the file exetension .html. Be sure you saved the file in an easy to find location - like you would with any word processing document or spreadsheet.
Open a browser (Safari, Chrome, Firefox).
Click and drag your new HTML file into the tab window.
Make some changes in your HTML file.
Refresh your browser tab.
You're now on your way to learning more about coding HTML in your local environment.
You can create HTML, CSS and JS files on your hard drive and simply open up the HTML file by double-clicking it (or opening it directly through the browser's file menu).
Typically these files are stored on an HTTP server that provides content when asked... but for your purposes to practice HTML and CSS, you can simply save the files on your hard-drive and open them from there.
Yes, they are (but CSS can be stored on a server as well, see 2.). You can then open the HTML file you're editing in any browser and see the output.
You can include CSS in your HTML file by using:
<link rel="stylesheet" type="text/css" href="path-to-your.css">
The path to CSS file can also lead to an online server, if the CSS file is stored there:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
The simplest way I can think to answer is:
Are CSS and HTML coded in a file on one's computer?
Yes
If so, how is the CSS connected to the HTML, and how are these connected to a website?
In the HTML file you specify which CSS files will be used in your page (I'm assuming you know what CSS files are for). The web browsers like Internet Explorer, Firefox or Chrome, read the HTML code and produce the sites you see anywhere.
If you are only practicing basic HTML:
Open notepad (Windows+R, type "notepad", enter)
Write some code like the found here: http://www.w3schools.com/html/html_basic.asp
Save your file with .html extension
Open it in your web browser by just double clicking the file
EDIT. Check this other example to see how to reference the CSS files http://www.w3schools.com/html/html_css.asp.
You only need to put your HTML file and CSS file in a folder in your computer, you don't need go to any site to practice this because HTML and CSS code is interpreted directly by your web browser.
Are CSS and HTML coded in a file on one's computer?
yes and no.
Basically CSS can be anywhere; your computer, your server, someone else's server, etc.
Your Chrome blocks some local sources for security reasons, but Firefox handles them pretty well. If you have a static website (that does not involve with any database), you can just create a directory and make html, css, and javascript files and open with Firefox to test.
Otherwise, get hosting services like godaddy, or get a server like Amazon Web Services and put them in there.
If so, how is the CSS connected to the HTML, and how are these connected to a website?
Typically, this is how people do.
<html>
<head>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!-- your body... -->
</body>
</html>
If not, where are HTML and CSS coded for use on the web?
This was answered above.
CSS and HTML are not things that need to be installed on your computer, you just need to create a file with the .html extension, put some code in it and open it with a browser. The browser interprets it automatically, the same goes for CSS. To create HTML pages for practice, all you need to install is an IDE to edit your code.
Ok - everyone has to start somewhere and I'm going to assume you are a novice so if any of this information is too basic, please excuse it.
There are tiers to consider here....First let's break down what the languages do - I'm going to talk about additional languages because I see people already talking about servers and scripting to so I'm going to try and tie this all together for you. I started self taught and learned a lot of hard lessons so hopefully this add's a little bit of an advantage to the learning curve.
SERVER Think of a server as a computer. It run's slightly different software but the principles are the same. It's only job is to store code, interpret it and present it when called. A very popular server software that you'll find is apache so let's focus on this for now. Windows is not a server and can't be used as a server. However, it's possible to edit a server with windows and it's possible to run server software on top of windows just like any other application. You'll hear references to WAMP, LAMP, XAMPP and a bunch of other acronyms but for now you just need to know why they exist and what they do. A server is not required to write and produce html and css documents
HTML The primary purpose of HTML is to tell a web browser what it's looking at. You'll see a lot of HTML4 vs HTML5 and a ton of other arguments that won't make a lot of sense up front. The important thing to remember about HTML is that it is the framework for everything website related. A lot of people will argue that other languages are more important for one reason or another but without html, none of the other languages matter at all. Whatever you know about this is fine for now. Start small and work your way up.
CSS Is amazing. CSS3 is the current standard but there are still some things that are not cross browser compatible. That's a story for another day but the basics are the same everywhere. You define your classes, id's and elements then tell them how they're going to look. The more you get in to CSS the more you'll realize how amazing it really is. It's useful on a lot of levels and plays a big part in some scripting languages. The biggest thing to remember about CSS is that you should write as little as possible. The more rules you write, the more chance there is for overlapping and something you wrote 3 files ago on line 463 is going to dominate a new rule you just wrote. Try and write as much as possible in classes too so you can really make your code globally usable.
PHP/ASP These are just two of the more popular languages that are considered back end languages. When you're thinking of a website, break it down like this. Front end = Browser, Back end = server. Anything that PHP does is on the browser side. As an end user of a website, you'll rarely see it but it's a major component. This is relevant because as you grow, you'll wonder about trying your hand at a back end scripting language. That's great but that's when you're going to start getting in to servers and such so I'm sure you'll hear a lot about the benefits of it but for now, just stay focused on the basics until you're comfortable.
Javascript/jQuery Again, this is just two popular examples of the many scripting languages that are available on the client side(the browser). These languages can generally be viewed(and edited) by the end user. They are extremely useful for changing pages content without reloading the page and they can talk to the server languages as well. Again, get more comfortable first with your basics before branching out here but with the references you're bound to receive to these languages as you learn, it's helpful to know what they do and why.
Editor To edit html you can absolutely use any text editor. Word, notepad, notepad++, sublime-text, wordpad...literally anything that saves in a standard text format. As long as the extension is html, css, etc. The editors geared towards programming offer a lot of features and benefits as compared to the basic editors available in your windows/mac setup. Try your hand at a few different ones and see what suits your taste. You can write one file of html, download the programs and right click to open with each program to see the differences. Personally I recommend Notepad++ but to each his own.
Why is my answer so long? I know this is a majorly overkill answer to your question however I also know how hard it was for me to get started in this field without some very basic knowledge. This should be enough to get you off and running and hopefully help out when you encounter some unfamiliar territory. In the future, if you find yourself looking to get in to the server/scripting world, let me know and I'll pass along a write up I did on setting up xampp for windows.
Good luck!!
You need a text editor to practice your code I recommend downloading Sublime
Its free, in sublime under view you can change syntax which is the language you are programming in you can set it to html or css or any other language you desire.
The structure for "connecting" html and css is usually a simple folder like structure.
Create a folder called Website
In that folder you would have your html file(s) you can call it index.html
Also in that folder you would have sub folder(s) for your CSS and JS but since you are just working with CSS now create a folder named css. This is where you will save your css file that could be called something like style.css
Here is a more through guide on folder and directory structure.
Keep going with Codecademy and build your own projects in the browser.
I'd recommend taking a look at a good example. HTML5 Boilerplate is a good starting point and has some good practices for a project (in my opinoin). This may be a good reference for you to get a feeling of how the javascript and css files can be arranged and linked to. The website is static so you can open the index.html file with a browser to preview it. You can also make changes to the css and javascript files to see how this changes the index.html page.
https://html5boilerplate.com/
You're asking a very broad set of questions but hopefully there's quite a few good answers in here to point you in the right direction. Good luck!
It is technically possible to have both HTML and CSS in one file using the style tags:
<html>
<head>
<title>Title</title>
<style>
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>Test Text</h1>
</body>
</html>
However it is considered proper practice to use Cascading Style Sheets, which is probably what Code Academy used.
Checkout setting up a WAMP, LAMP, MAMP server depending on your platform (W) Windows, (M) Mac, (L) Linux.
http://www.wampserver.com/en/
https://www.linux.com/learn/tutorials/288158-easy-lamp-server-installation
https://www.mamp.info/en/
Then in your respective directory (html_public, Sites, wherever) you will have a local server environment where you can develop locally.
I use the Sites/ setup on a mac
css and javascript are usually linked in the head section of an html document.
You will need a editor - I recommend looking at Sublime Text or Atom.io
If you just want to play around for a while before attempting your own projects, you can build on sandboxes like http://codepen.io
Are CSS and HTML coded in a file on one's computer?
A: depends either you can create both css and html in one file or in different files. If you using lots of css code then everyone will suggest you to write them in different files and you can code them in someone's computer or on server.
If so, how is the CSS connected to the HTML, and how are these connected to a website?
A: you said that you have done html and course and you don't know who to add a css file to a html file. (Use Google sometimes) use this link you Wil get you answer. After coding you can test them using your web development tool if you are developing in a tool. Else use your web browser to test.
I suggest you to visit websites as much as you can an use chrome tool to see how that website is done (you can only find front end parts.)
I'm building a website using Wordpress on Localhost. I'm learning the structure of the webpage by editing the HTML and CSS using Google Developer Tools. I want to know which file I'm editing and where on the hard drive it is located.
I have edited the height and width of an element inside the circle marked but when I try to save the file, it asks me for a location to save which I'm unaware of. One the left is the HTML code, how can I locate the file with that HTML code?
how can I locate the file with that HTML code?
You can’t – not really, not from within your browser, because your browser doesn’t see individual “files”, it only sees the complete HTML source code of the one resource it requested, that might have been composed of lots of different files, plus functions that generate HTML code dynamically – so that actual piece of HTML code might not even be written as such within a file.
You might be able to identify different sections of the HTML document though – and with a little knowledge of the template structure and output logic of WordPress, you should be able to find out what the relevant file to look in might most likely be.
Another thing I’d suggest, is that you get yourself an IDE that allows you to search across all files in the whole project folder – and than look for certain class names, IDs etc. on the HTML element in question or near/above it. If you search for those, you might get lucky as well. (Although a lot of times those classes/IDs might be output dynamically as well, so you won’t find them inside of a template file as such.)
Especially with little knowledge of WP template structures, it might take some trial and error to find the piece of code and file you are actually looking for.
The Google Developer Tools is not a code editor, so whilst you can try out different options I'm not aware that you can save it, and if you can, I wouldn't say it's a good idea.
Wordpress uses PHP, a language which HTML code is embedded with PHP code. For example the code <a href='<?php echo(link1);?>'>Home</a> has had the href attribute embedded with a PHP variable. If you want to find the HTML code, look at the PHP files in your Wordpress directory, index.php is the landing page code.
One thing to bear in mind is that not all the HTML code will be included in one PHP file, it is usually included from several files, and much of the content will be in the wp-content directory, keep an eye out for the PHP include or require commands.
Google developer tool is just to check, once you are done with the editing, You have to copy your css code- and paste in your css file.
To get the css file look at the below image.
Hope your question got clarified!!
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I developed a small website with 15-20 pages.
The site consists of -
Header menu.
Content (this is different for each page).
Footer.
I somehow not able to digest the fact that I have to write the code for header menu and footer on all the pages.
Can someone please help me understand how can i manage to write repetitive code in one place and import it or include it in all the pages.
Also, it'll be a bonus if you can mention how can one handle the same case with the javascript code, images and css too?
Your question is very broad and generic AND very much on the right track. It seems as though you are approaching this site building project from a very static perspective while you actually need to approach it dynamically.
The bare minimum that you can do is to use SSI as suggested here:
http://en.wikipedia.org/wiki/Server_Side_Includes
Now, depending on your level of knowledge and willingness to learn you will be able to accomplish this much more elegantly if you use a scripting language such as php for example.
http://www.w3schools.com/php/
Scripting languages allow you to create content once and then include the file with that content with a single line of code into another file. PLUS do a lot more with it down the road if your website needs to grow.
For example, you can create header.php and footer.php and include them in your pages that must also be php files. That way you only create header and footer once and re-use them..
If you create header.php and put your header code into that file ... And then you create somepage.php which is your content page.. In order to include the header code you have to write this into some page.php where you want your header to be
<?Php include('header.php'); ?>
It is important that you respect the html containing elements structure. The SSI method literally injects exact content as is in included file.
You can literally split one file in multiple parts, save them as php and include them into third file and get the same result as the original file was.
You do have to insure that your hosting server supports dynamic scripting language that you want to use. Most hosts support PHP.
Also, as far as including JavaScript goes. If you write JavaScript properly then you can write all your JavaScript code in .js files and then include those files into your php or html files when needed. The same goes for CSS files. You put CSS code into style.css file and link the file to your something.php
This is how you include JavaScript files..
http://www.w3schools.com/tags/att_script_src.asp
You usually put this into element of your page
<script type="text/javascript" src="jsfile.js"></script>
This is how you link a css file with your other files..
http://www.w3schools.com/css/css_howto.asp
You put this into element of your page.
<link rel="stylesheet" type="text/css" href="style.css" />
However,,,
All this is still pretty rudimentary. Maybe you should look into using hosted WordPress or a similar content management system to help you build a nice dynamic web site.
Or, a good way to start, if you have a desire to actually learn, is to learn basics from www.w3schools.com
You will need to go through
HTML and HTML5,
CSS2 and CSS3,
PHP (this is what allows for dynamic stuff- you can try learning python alternatively.. I prefer php myself),
JavaScript,
JSON
And then when you learn JavaScript you will want to get into JavaScript libraries,, like jQuery and ultimately Angularjs (this is a more advanced library but very useful)
Also you will want to learn how to use databases to store data so you don't have to create a new page at all every time. You should look into using MySQL with PHP for that. You could alternatively look into Postgress, liteSQL and other options too.
All of these, except for Angularjs are available to learn for free at w3schools website. You can just google it.
One more thing...
This may seem intimidating but if you suspend that feeling at first and stick through the very first paradigm challenges you will learn that it is not at all that complicated.
Good luck!
P.S.
My web programming career started 15 years ago when I tried building a small site and got frustrated with exactly the same problem you are facing now :)
You may use Server Side Includes (SSI) if your server supports it (http://en.wikipedia.org/wiki/Server_Side_Includes).
As for css and javascript - move code and declaration to separate files and include link to them on your pages (usually in head element) like this: <script type="text/javascript" src="javascript-file.js"></script> and
<link rel="stylesheet" type="text/css" href="css-file.css" /> (see http://www.w3schools.com/tags/att_script_src.asp and http://www.w3schools.com/css/css_howto.asp for details).
I am going to write a big website, it has hundreds of HTML pages. There are some parts of the file using the same HTML code, such as the banner, the bottom disclaimer, etc.
I want to update the common parts of the HTML in a batch when that parts are modified, I am seeking a way to efficiently do that.
Currently my solution is surround the tempates with HTML comments, and use Linux script(sed mainly) to update it when necessary. Like:
<!-- Template1 -->
<!-- Template1-end -->
Any better way?
Template Toolkit is your friend. If you are building using a shell script that spits out static files (and it sounds like you are), then you'll want the ttree utility. You'll probably find the tutorial useful and want to make use of the WRAPPER directive (which lets you have a complete page with "Insert content here" sections rather then having to stick "Include header", "Include nav", "Include footer" in every content page).
Going with TT gives you the flexibility to move to server side scripting in the future with a minimum of effort (so long as you are happy using Perl for the server side programming) as Template-Toolkit has Perl modules as well as ttree.
Use a content management system. Either build a lightweight one or rely on an existing one.
You could use javascript to include templates, or just go the server side way and use dynamic page include methods, found by default in most appropriate web scripting languages. There's no way to dynamically achieve this using HTML only, you would have to go via a third party software or application to update your source files in the end anyway (like you already are doing with your batch script).
I'm looking for a HTML editor that kinda supports templated editing or live snippets or something like that.
Background: I'm working on a website for a friend. As there are no specifications what the webspace/webserver can or can't do, I decided to make it a pure HTML/CSS page, or rather 10 of them. I wrote a template, copied it 10 times and edited the content. And guess what, the template has to be changed.
Therefore I'm looking for a (HTML-)editor that has some kind of live template system where I can edit the content in as it where plain text and then save the project into the 10 pure HTML/CSS files.
I thought about using PHP (the only script language I've some knowledge in), but writing the underlying template script would cost me enough time that I could change all files by hand. I'm not that familiar with AJAX to know if there's a way to load content from another file. If so, this would be an option if there already is a script. With Webdeveloper (firefox extension) I could save the generated source code as HTML/CSS.
Thanks in advance
Edit: any hints how to do this without an editor are welcome
Edit2: In my mind the tool looks like a plain old text editor like SciTe, but capable of editing multiple files simultaneously in the same text area, so it looks like editing one ordinary file, but actually it's a whole bunch of files.
Dreamweaver will do this for you, it's had HTML templating of the type your describe built in from very early versions (because from how you phrase the question I do not think you're thinking along the lines of a PHP templating engine such as Smarty, but some sort of HTML layout formating)
Although I regularly look around for Dreamweaver replacements, and I've certainly been impressed by Aptana, I still tend to use Dreamweaver in my development stack simply because whereas I can compensate for some of the more coding-orientated features it misses, I find the WYSIWYG nature of the editor invaluable.
I would have used a template engine.
I wrote a post about a dead simple script using the Dwoo template engine and mod_rewrite, where I am taking the uri and loading the forrect data and template based on that. You should be able to get it running in a few minutes.
Maybe I am way off on this, but why don't you look into an Open Source Content Management System (PHP/MYSQL)? There are MANY light systems that are not like Drupal, Joomla (if you do not want the big bulk of those CMS's).
There are even a few good ones for light web design that are flat file driven.
That would be my suggestion, at least if not for this project, look into it for future projects.
Here is an example of a great micro CMS that would seem to fit the bill for what you are doing:
http://www.mini-print.com/