Web Programming Terms
With our recent work on new Dreamweaver manuals we thought it might be handy to put together an overview of some of the languages, concepts and frameworks that are useful to know when creating web pages, whether you're doing it through a powerful all-in-one tool like Dreamweaver or by editing individual text files by hand in Notepad.
HTML
HTML is the bedrock of web programming, the language that everything else builds on. HTML stands for Hyper Text Markup Language, but don't let that big name scare you because at its base HTML is just text with some additional instructions added to tell your browser which parts should be headings, which parts should be lists and which parts should link to other web pages.
The latest (and in theory, final) version of HTML is HTML5, which simplifies a lot of the cruft that had built up over successive versions of HTML while also adding new features for the modern Web (such as native audio and video controls, offline storage, geolocation and fast 2D drawing controls) and a plan for how HTML will be evolved in the future.
CSS
CSS is responsible for styling the text and controls that you define in your HTML. With CSS you can change the colour, size and layout of your page elements. Separating the text of a page (in HTML) from the styling of the page (in CSS) provides several benefits:
- It makes it possible to change (for example) the colour of links or headings in one place in the CSS document and have the change immediately reflected through every link or heading occurence in the HTML page.
- It makes it possible to display the same HTML page with different styling based on where it is being displayed. For example, you might have a colourful style for displaying a web page on screens and a monochrome one for sending it to a printer. You might also want the same web page to display differently based on the size of the screen it is being accessed on (more on this in Responsive Design below).
JavaScript
JavaScript is used to program your HTML pages to add interactivity like expanding sections, popups and so on. Back in the early days of the web, JavaScript was clunky and slow, but due to its expanding ubiquity and some powerful backers like Google and Mozilla, it has become powerful and extremely fast. Now JavaScript is responsible for sophisticated, rich web applications, taking us from the initial web of static pages to today's web of interactive web applications like Gmail and Facebook.
Flash
Ah, Adobe Flash. Once a part of every website that needed to play video or host browser video games, Flash has fallen out of favour ever since Steve Jobs banished it from the iPhone and iPad. Since then any website that wanted to provide its content on all platforms has had to implement HTML5 video and Flash has slowly dwindled on the web.
Responsive Design
People no longer use just their desktop or laptop computer to access the internet. We now have access to a broad range of internet-enabled devices including mobile phones, tablets, video game consoles, TVs and much more. All of these devices have different sized screens (from very small to very large) and display websites in different ways. When you create a website, it may display the way you designed it and be easy to navigate on a laptop but not on a mobile device. This is where responsive design is important, as it allows you to design a website that is equally effective across all of these different platforms. Responsive website design is comprised of three main concepts – fluid grids, flexible images and media queries:
- A fluid grid layout enables content to flow and adapt to the size of the screen it is being viewed on.
- Flexible images work in a similar way to fluid grid layout and will scale up or down with screen size.
- Media queries are used to deliver different CSS styles for the same website depending on the characteristics of the device being used to access it, such as screen size or display type.
Bootstrap
Writing HTML, CSS and JavaScript for even a small website can be time-consuming and finicky. Fortunately, there are frameworks like Bootstrap that you can use to create responsive webpages and websites without having to write everything from scratch.
Bootstrap is a free framework for developing responsive websites. It includes responsive HTML and CSS templates for buttons, tables, navigation, image carousels and other elements that you can use on a web page as well as a fluid grid system for laying out pages that automatically flow appropriately for the screen they are being displayed on.
Although Bootstrap is arguably the most popular of the web frameworks, there are many others such as Foundation, Skeleton, Pure and UIkit with their own distinct pros and cons.
jQuery
jQuery is a JavaScript library designed to make it easier to navigate a document, select elements, create animations, handle events, and develop sophisticated web applications. Like Bootstrap, it is open and free and according to Wikipedia, it is the most popular JavaScript library in use today, with installation on 65% of the top 10 million highest-trafficked sites on the Web.