Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › Standard Way of Reusing HTML Code (elements that are the same on every page)
New Posts  All Forums:Forum Nav:

Standard Way of Reusing HTML Code (elements that are the same on every page)

post #1 of 9
Thread Starter 
Hey all,

I am completely new to web development and have just started putting together a few pages using Twitter Bootstrap along with some HTML/CSS/JavaScript tutorials. Part of the site I am envisioning is a navigation bar along the top with links to the various parts of my page.

Now, I already have 5 or 6 pages, and every time I add something to the nav bar, I have to update all 6 html files. Obviously this isn't a good situation, and definitely will not scale as I make my site bigger. So for anyone who has experience in this area, what is the standard way of dealing with this? I'm assuming that professional web developers don't manually update dozens of pages one by one.

Thanks in advance, and please excuse my ignorance if I am missing some obvious answer.

Thanks
-Morag
Dell XPS M1330
(13 items)
 
  
CPUMotherboardGraphicsRAM
T8300 Intel PM965 Nvidia 8400M GS 4GB DDR2 
Hard DriveOptical DriveOSMonitor
250GB @ 5400RPM DVD/CD Burner Vista Premium (32-bit) 13.3" LCD Display 
  hide details  
Reply
Dell XPS M1330
(13 items)
 
  
CPUMotherboardGraphicsRAM
T8300 Intel PM965 Nvidia 8400M GS 4GB DDR2 
Hard DriveOptical DriveOSMonitor
250GB @ 5400RPM DVD/CD Burner Vista Premium (32-bit) 13.3" LCD Display 
  hide details  
Reply
post #2 of 9
Learn how to use Wordpress. I was in your shoes (not literally as that would be awkward) not too long ago. Check out NetTuts+ for great tutorials. best way to learn is to buy a template off Themeforest and learn to break/fix it and go through the code.

Twitter Bootstrap is a great place to start so you're on the right track. Start looking at HTML/CSS to Wordpress tutorials thumb.gif

Good Luck!
post #3 of 9
Personally I'd recommend learning PHP (as much as I hate the language) over Wordpress.

Buy a man wordpress; he'll build a blog. Teach a man program; he'll build anything he can dream of.
post #4 of 9
The long and the short there is that you need to learn a couple of programming languages.

Here's my answer from another thread.
Quote:
I would recommend udacity over opencourseware for beginners. They have a lot of good math courses (and some good programming courses too)
https://www.udacity.com/courses

I advise learning python or scheme first; however, if you are wanting to build web games, then I would definitely recommend scheme over python (programming in javascript relies on lots of so-called higher-order or functional programming techniques which you CANNOT learn using python and are hard to learn in JS because the language is screwed up in many ways).

This free scheme textbook from MITs intro to programming course is a book that EVERY programmer should read -- even if they never program in scheme at all.
http://mitpress.mit.edu/sicp/
A more gentle introduction to scheme
http://www.ccs.neu.edu/home/dorai/t-y-scheme/t-y-scheme.html

python
A lecture series
https://www.udacity.com/course/cs101
Here's an excellent free book on python:
http://www.greenteapress.com/thinkpython/

algorithms, they may be a little boring, but the course is essential
https://www.udacity.com/course/cs215

As to a schedule, I'd recommend learning in the following order

the basics of html layout and css from Mozilla Developers Network (MDN)
https://developer.mozilla.org/en-US/docs/Web/Tutorials

Learn javascript from eloquent javascript (much better than codeacademy)
http://eloquentjavascript.net/

The best overview course on web development that I've seen (it uses python)
https://www.udacity.com/course/cs253

a course on html5 game development (if you're interested)
https://www.udacity.com/course/cs255

EVERYONE needs to know C. When managed languages like scheme, JS, or python fail you, C will still be there for you. Here's a good textbook on the topic
http://c.learncodethehardway.org/book/

If you want a lower-level overview of programming, here's a book on AVR assembly (It's easy; lots of children program in this)
http://www.avr-asm-tutorial.net/avr_en/beginner/

I would recommend that you steer clear of Java (if you need the Java VM, take a look at clojure instead) and if somebody recommends anything to do with PHP, fight them as though your life depended on it.

Finally, if you need help learning, ask those of us here for help.

edit: a couple other resources. They are not so much additional as they are alternative.

Here's a good place to learn node.js (server-side javascript)
http://nodeschool.io/

ruby is a good alternative to python
http://ruby.learncodethehardway.org/book/

Edited by hajile - 3/28/14 at 9:52am
post #5 of 9
Thread Starter 
Thanks guys.

Hajile, I've been using your post as a general guideline for getting into web development, but having a thorough knowledge of all that before I start coding that won't work for me. I don't learn new languages well unless I'm working on something with them.

Regarding PHP, that is on my list to learn. Although I've heard it's painful and horrible, it's also widely used, so for me it is worth at least getting a handle on it. So for my specific question, would a good solution be to make a file "navbar.html" and then use a php include statement like
Dell XPS M1330
(13 items)
 
  
CPUMotherboardGraphicsRAM
T8300 Intel PM965 Nvidia 8400M GS 4GB DDR2 
Hard DriveOptical DriveOSMonitor
250GB @ 5400RPM DVD/CD Burner Vista Premium (32-bit) 13.3" LCD Display 
  hide details  
Reply
Dell XPS M1330
(13 items)
 
  
CPUMotherboardGraphicsRAM
T8300 Intel PM965 Nvidia 8400M GS 4GB DDR2 
Hard DriveOptical DriveOSMonitor
250GB @ 5400RPM DVD/CD Burner Vista Premium (32-bit) 13.3" LCD Display 
  hide details  
Reply
post #6 of 9
PHP is horrible, but if you're just using it to de-duplicate your header and footer you'll find that it's far simpler than anything else to get working. For starters, your web host will already support it even if you've got the most bottom dollar, unreliable shared hosting imaginable.

If you'd prefer a more exotic option you could use a preprocessor like Jekyll.
    
CPUMotherboardGraphicsRAM
i7 920 D0 MSI X58 Pro-E GTX 560 Ti 448 3x2GB G.Skill DDR3-1333 9-9-9-24 
Hard DriveHard DriveOptical DriveOS
840 Pro Caviar Black LG BD-ROM Windows 8.1 Pro x64 
MonitorMonitorKeyboardPower
Dell U2713HM Dell U2311H Turbo-Trak (Google it :D) Corsair HX-520 
CaseMouseMouse PadAudio
CM690 Mionix Avior 7000 Everglide Titan AKG K 242 HD 
  hide details  
Reply
    
CPUMotherboardGraphicsRAM
i7 920 D0 MSI X58 Pro-E GTX 560 Ti 448 3x2GB G.Skill DDR3-1333 9-9-9-24 
Hard DriveHard DriveOptical DriveOS
840 Pro Caviar Black LG BD-ROM Windows 8.1 Pro x64 
MonitorMonitorKeyboardPower
Dell U2713HM Dell U2311H Turbo-Trak (Google it :D) Corsair HX-520 
CaseMouseMouse PadAudio
CM690 Mionix Avior 7000 Everglide Titan AKG K 242 HD 
  hide details  
Reply
post #7 of 9
To be honest, if all you're wanting to do is include a few HTML elements then you could probably get away with Server Side Includes: https://en.wikipedia.org/wiki/Server_Side_Includes

However I do think learning a proper server side language will be more beneficial in the long run
post #8 of 9
Core I7
(13 items)
 
  
CPUMotherboardGraphicsRAM
I7 920 rev. D0 @ 4.26Ghz EVGA X58 SLI EVGA GTX 285 OCZ XMP 3x2Gb (pc3 12800) 
Hard DriveOptical DriveOSMonitor
Western Digital Caviar Black 640Gb x 2 LG GH22LS30 openSuse 12.1 x64 HP F2105 
PowerCase
CORSAIR 850TX Cooler Master ATCS 840 
  hide details  
Reply
Core I7
(13 items)
 
  
CPUMotherboardGraphicsRAM
I7 920 rev. D0 @ 4.26Ghz EVGA X58 SLI EVGA GTX 285 OCZ XMP 3x2Gb (pc3 12800) 
Hard DriveOptical DriveOSMonitor
Western Digital Caviar Black 640Gb x 2 LG GH22LS30 openSuse 12.1 x64 HP F2105 
PowerCase
CORSAIR 850TX Cooler Master ATCS 840 
  hide details  
Reply
post #9 of 9
Quote:
Originally Posted by Plan9 View Post

To be honest, if all you're wanting to do is include a few HTML elements then you could probably get away with Server Side Includes: https://en.wikipedia.org/wiki/Server_Side_Includes

However I do think learning a proper server side language will be more beneficial in the long run

I agree. I went with the SSI method first when I wanted to have some consistency between my pages, but using a template in PHP and including the necessary files based on a query string can be useful too - just be careful of not having open_basedir=/ set in php.ini, since that would allow an attacker to read any file on your system tongue.gif
#well
(19 items)
 
Lenovo L530
(8 items)
 
 
CPUMotherboardGraphicsRAM
Intel Core i7 4770k Gigabyte Z87X-UD4H XFX Radeon HD 6950 Corsair CMX8GX3M2A2000C9 
Hard DriveHard DriveOptical DriveCooling
Samsung EVO 840 Hitachi HDS722020ALA330 Generic DVD±RW Burner Noctua NH-D14 
OSMonitorMonitorKeyboard
Windows 8.1 Dell U2711 LG W2453 Ducky DK9008 Overclock.net Edition, Cherry MX B... 
PowerCaseMouseMouse Pad
Corsair TX850 Antec Three Hundred Corsair Raptor M40 QPAD HeatoN M 
AudioAudioAudio
E-MU Tracker|pre Beyerdynamic DT-770 250 Ohm AntLion ModMIc 
CPUGraphicsRAMRAM
Intel Ivy Bridge 3210M Intel HD 4000 Graphics Soldered Corsair Vengeance  
Hard DriveOptical DriveOSMonitor
500GB DVD-+RW Windows 7 Professional 1600x900 
  hide details  
Reply
#well
(19 items)
 
Lenovo L530
(8 items)
 
 
CPUMotherboardGraphicsRAM
Intel Core i7 4770k Gigabyte Z87X-UD4H XFX Radeon HD 6950 Corsair CMX8GX3M2A2000C9 
Hard DriveHard DriveOptical DriveCooling
Samsung EVO 840 Hitachi HDS722020ALA330 Generic DVD±RW Burner Noctua NH-D14 
OSMonitorMonitorKeyboard
Windows 8.1 Dell U2711 LG W2453 Ducky DK9008 Overclock.net Edition, Cherry MX B... 
PowerCaseMouseMouse Pad
Corsair TX850 Antec Three Hundred Corsair Raptor M40 QPAD HeatoN M 
AudioAudioAudio
E-MU Tracker|pre Beyerdynamic DT-770 250 Ohm AntLion ModMIc 
CPUGraphicsRAMRAM
Intel Ivy Bridge 3210M Intel HD 4000 Graphics Soldered Corsair Vengeance  
Hard DriveOptical DriveOSMonitor
500GB DVD-+RW Windows 7 Professional 1600x900 
  hide details  
Reply
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding
Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › Standard Way of Reusing HTML Code (elements that are the same on every page)