logo

Pamela Bilodeau - Olympic College Faculty

mountain Landscape

Topics in Web

Such a rich and dynamic subject! The changes have been so rapid -- and they continue to be. Click the items on the left to check out some of my musing and meanderings on topics related to the web. I'll continue adding more content here when I can.

Select a topic to read!

Topics:

The Browser is King...!

...well, at least when we're talking about web development. Browsers are applications that are created to "read" HTML code. They actually do a lot more than that, but certainly reading HTML is one of their primary purposes. People use browsers to view web pages. The common web browsers people use these days include Chrome, Firefox, Internet Explorer, Opera, and Safari, to name a few of the most popular ones. The job of the browser is to render page content exactly as the developer intends it to appear. It does this by parsing through the HTML code looking at the markup tags, which informs the browser about the page’s content and how it should be displayed.

Web developers are coders. They use HTML (and other things) to code web pages so that browsers will render them perfectly. This is not to minimize how important the user is in all of this. The user is the one to experience your web page. When thinking about the user, you are concerned primarily with design. Design is critical—hugely important. Wear your designer hat when thinking about things like layout and style; wear your developer hat when figuring out how best to code for browsers to render your code to produce results as needed. For your code to work with the browser, you need to think like a browser thinks. Put simply, if you want your code to work, you will write code that browsers can read.

That is why the browser is king.

(Disclaimer: Please take the king reference as a metaphor, not to be gender-specific.)

HTML -- It's Just Plain Text

HTML, is an acronym for hypertext markup language. It is a coding language used to mark up content with the purpose of telling web browsers how to display content. The whole purpose of web pages is to display content. Web pages are where we share information and communicate things to one another. In order for browsers to understand how to display our content, we have to mark the content up using "tags" that tell the browser what to do with the content. Without HTML, our content would look pretty plain. HTML is the coding language we use to mark up our content for displaying on the web.

It's just plain text:

HTML code is typed into a text editor as plain text. That means you will simply be typing all of the things you want to be on your web page into a text editor. That includes everything from narratives to headings, and even images.

The “M” part of HTML (markup):

HTML is comprised of “tags,” which are coding elements that describe to the browser things about the content of your web page. The tags are what create the “markup” of a page. Where the content is the “stuff” of the page, the markup is the code. HTML tags go around your content to tell the browser what something is, where that something starts one the page, and where it ends on the page.

Cascading Style Sheets (CSS)

What HTML is for page content, CSS is for page design. We use HTML to define what the page content is, and we use CSS to describe how it should appear. Quite simply, that is how it works.

As a browser parses through the HTML, it builds the page using style rules that tell it how to display various page parts, such as headings and paragraphs. This includes fonts, colors, and more. All browsers come ready-built with default styles, which dictate the default font, the page background color (typically, it is white), and other elements that we tend to take for granted. If not told otherwise, the browser will render your page content using its own built-in styles. The purpose of using CSS is to override the browser's styles and inform the browser how you want the page to look. We use CSS for creating specific styles that affect fonts, colors, backgrounds, margins, and more, to create just the precise look for the page.

When two rules conflict, such as when you specify a font to use on the page that is not the same font as what the browser might be using, the browser has to choose which font to use. Style rules have precedence depending on where they show up. In terms of precedence, the browser's built-in rules have the lowest priority. All other style rules added to the page will be applied over them. There are at least seven places that styles rules can be applied to a page element, and it is almost impossible to avoid a conflict between two or more. The priority placed by the browser on "where" the style rule is applied determines which style gets applied. It is this priority/hierarchy that creates a cascading effect, and is why it is referred to as cascading style sheets, or simply CSS.

JavaScript -- Jazzy Functionality

JavaScript is the scripting language of the web. It is part of the HTML5 triumvirate (HTML5/CSS3/JavaScript). What HTML does for describing what content is on the page, and CSS does for explaining how it should look, JavaScript does for making it dynamic and interactive. JavaScript is about functionality. It provides functionality by way of programming--yes, that is coding, and specifically in this case scripting. Web developers use JavaScript when their pages require something to change pretty much on the fly, such as dates, animated sequences, and so much more. Because it is a programming language, it can do things that programs do, such as store variables, process operations, respond to events (like a click). JavaScript is meant to run inside of the browser. This means that a page delivered with some JavaScript code will be processed on the client's device within the browser.

JavaScript has been around pretty much since the beginning of the World Wide Web, so that dates back to the mid 1990's. It's gone through a few iterations since then, but its overall purpose remains the same--to add functionality to web sites. Here is a link from the W3C that offers a brief historical perspective: A Short History of JavaScript.

Many people confuse JavaScript with Java. THEY ARE NOT THE SAME THING!. I'll say that again with less shouting: Java is a different language than JavaScript. Don't be caught confusing the two, since they are very different. 'Nuff said on that.

RWD is short for "Responsive Web Design." It is more a concept than it is a technology, per se. RWD is interested in the responsiveness of web pages to a variety device/screen sizes that may request a page. Developers are expected these days to produce web pages that will render nicely no matter what size the screen. In order to do that, they must apply RWD. There are several accepted coding techniques generally accepted as best practices to achieve optimal responsiveness. These include such things as media queries, flex-boxes, grids, and floats. The development world is changing and maturing with better tools coming along all the time. It's an exciting time in web development, due in large part to RWD. Each of the pages on my faculty site employs one or more approaches to RWD, so you will find grids, flex-boxes, media queries, and floats. Here is one of many links I can suggest: The Web in 2016

Flexbox is the answer to responsive web design

Answer to FAQ Number 7, this is the third div test

Answer to FAQ Number 8, this is the third div test

Answer to FAQ Number 9, this is the third div test

Answer to FAQ Number 10, this is the third div test

Answer to FAQ Number 11, this is the third div test

Answer to FAQ Number 12, this is the third div test

Answer to FAQ Number 13, this is the third div test

Answer to FAQ Number 14, this is the third div test

Answer to FAQ Number 15, this is the third div test

Answer to FAQ Number 16, this is the third div test

Answer to FAQ Number 17, this is the third div test