Post by Marti-Pair Furxheir S.H. on Aug 24, 2013 5:21:06 GMT -6
As mentioned in earlier lectures, web development is divided in 2 sphere: the client-side development and the server-side development. I also explained how, since client-side development is interpreted by the browsers and not the server it needed to be done on standard tools whereas server-side development could be done with little known and supported tools.
Well, client-side development tools are pretty much divided in 3 types of tools:
1 ) Mark-up languages
2 ) Stylesheet languages
3 ) Scripting languages
Let's start with Mark-up languages.
If I were to ask you to name me what are the main mark-up languages, you would probably start with HTML, and then, struggle to find another one.
So, I'll help you, the 3 main Mark-Up languages are HTML, xHTML and HTML5, which are really just different versions of HTML which are more or less compatible with each other. For the purpose of this introduction class, we'll skip over the difference and just explain that xHTML was an improvement over HTML to make it also XML compliant, and that HTML5 adds to HTML much more advanced features which were reserved in the past for scripting languages.
HTML is a language composed of tags. For example, to mark a word in bold, we would use <b>text in bold</b> where <b> starts the bold section and the </b> ends the segment. In xHTML, a tag finishing with a / is empty, like <hr /> for example, which make and Horizontal Ruler.
Everything between a < and a > will not be printed on the page and as such, if a browser encounters an unknown tag it will usually know not to process it.
In reality, there are only 2 types of tags but I like to divide them in 3 groups:
1 ) Layout tags
2 ) Block tags
3 ) Inline tags
Layout tags make the main structure of your webpage and constitute the 4 requires tags all HTML pages are supposed to have:
A) The <html> tag, which usually start your document, which is closed with </html>, usually the last tag of a page.
B) The <head> tag with contains header information not displayed in the browser. It is always the first block inside the html block
C) The <body> tag which is the second block and contains the data outputted to the browser
D) The <title> tag which is contained in the <head> block and which defines the title of the page
Block tags are tags which use all available width and force a line break. For example, the <p> tag delimits paragraphs and as such, always start on a new line and use the full width: you can't place anything on the same line as a paragraph normally.
Inline tags however, only use the space they need and do not start a new line, or force next elements to be on a new line.
There are tons of tags, like h1 to h6 which are headers, where h1 is usually the page header, h2 the section headers and h3 the content elements headers (all of which are block elements) or div and span which allow to set a class or an id to a section. They are both pretty much identical to each other, but div is a block element while span is an inline element.
One pair of tags that I find really interesting are <ul> and <li> which are normally used to display an Unordered List and its list items or, if you prefer, a bullet point list. A list could be like this:
<ul>
<li>This is the first element</li>
<li>This is the second element</li>
<li>This is the third element</li>
</ul>
What's really interesting is that this markup (or set of tags if you prefer), had become pretty much the standard for coding website menus.
Have you ever seen a menu coded with an unordered list? Sure, the top menu of the current forum is encoded with an unordered list. In fact, most modern menus use an unordered list and yet, we very rarely see a bullet point list for a menu.
Why? Because of the second part: The stylesheet.
The most common stylesheet language is CSS, or Cascading Style sheet. The alternative is, well, wait a minute I am sure I know it. Oh, that's right, CSS pretty much has a monopoly on stylesheets.
Is it perfect? Not at all, and as such, there are javascript (which will see learn about soon) extensions to CSS which add new features like LESS, but we'll stick to the basic.
What is CSS? It's a declarative language which allows you to change the style or behaviour of HTML elements (content wrapped in tags) in a cascading fashion.
A CSS block starts with one or more selectors, which are used to select which HTML element(s) the style will apply to. Then, within curly braces, you have CSS styles applied to CSS properties.
Let's start with selectors. In a future class, we'll learn more about them for a whole lecture, but for now, let it be known that there are 3 main types of selectors: type selectors, which selects elements of a certain tag type, class selectors, which select elements with a certain class, and ID selectors which matched the element (singular) with a particular ID (which is unique in the document).
Tags selectors are spellers as they are, p for paragraphs, ul for unordered lists, li for list items, etc…
Class selectors are prefixed with a "." like .classname
ID selectors are prefixed with a #, like #id
They can be merged, like p.quote which which only select <p> tags with the class "quote".
Once you've selected an elements, what can you do with it? You can change multiple properties.
For example: "color" changes the text color, while "background-color" changes the background color.
We would set:
And we would have white text on a black background.
We have properties for margin (the distance between the element and other elements), padding (the distance between the sides of the elements and its content), border, size (width and height).
But the most interesting part are properties which change the behaviour of elements, notably the property "display".
I've explained that aside from the layout tags, all HTML tags are either block or inline. With the display property, you can override that can change an inline tag to a block tag and vice versa. You can even set display to "none" and thus, remove the tag from the output of the document.
With "position", you can override where the element goes, such as in an absolute position on the screen or fixed in space even if your scroll the page, instead of being the default "static" position of being displayed where they are in the flow of the document.
With CSS, there are thousands of new properties which allow you to reused the same HTML, such as a <ul> and <li> list in millions of different ways.
We'll cover CSS in a future class of this certificate.
But final thought: why is it cascading? Because properties applied to a more general selector are passed down to more specific selectors. If you set a font-family to "Verdana" on the body tag, the whole page will have the font-family "Verdana" except if overridden by a more specific selector (such as a selector with a class instead of just a tag, or a selector with an ID instead of just a class).
You can even nest the selectors.
Will put a 3 pixels wide black solid border around all images (img) contained in a link (a) contained in a paragraph (p).
There are even pseudo-selectors, like :hover or :first-letter, which allow you to select elements when the mouse cursor is above them or just the first letter of the element.
So, what is the strength of CSS? It allows to break free from the HTML when designing. In theory, you could reuse the same HTML file for multiple, completely different designs and only use CSS to change the look, This allows to provide a better separation between content and presentation, something which we will constantly talk about during this certificate.
If you want to see an example of this, the website www.csszengarden.com/ uses the exact same HTML code for 212 different designs submitted by designers all over the world which were selected for their look. A further 1039 were submitted but not selected.
How do you use CSS declarations?
There are three ways:
1 ) You add them in the head section of your document, inside a <style> tag.
2 ) You put them in a .css file and include them in the head section of your document. There are multiple ways to do that, such as the link tag:
<link rel="stylesheet" type="text/css" href="cssfile.css">
3 ) You set the style property of an HTML object, such as:
<p style="color: blue">This is blue text</p>
You should only use the style property very rarely.
CSS could have its own full course, but this certificate is about web developers and not web designers. You will only learn the basics a developer needs to know to make a website, but it should be enough to follow more advanced CSS tutorials.
That leaves us with scripting languages.
Just like CSS, the only real contenter is javascript which, despite it's name, is NOT JAVA. This misconception is so widespread with non developers is has almost begun to be used to weed out the beginners from the experiences. I've seen an example: Java and Javascript are as similar as a car and a carpet are… In reality, the two languages are unrelated other that since they are both based on C, they share very similar syntax.
Originaly, Javascript was named "Livescript" but was changed to Javascript in a co-marketing deal between Netscape (the original creators of Javascript) and Sun (the original creators of Java).
Naming conventions were then united to make Java developpers feel more at home when writing Javascript, at least, that's the theory.
So, Javascript is a scripting language run in your browser which lets you manipulate the DOM, the Document Object Model, which is the list of all of the HTML tags of a site along with all of their properties.
This means that Javascript is able to manipulate HTML and CSS.
Sadly, once again, Javascript, is too complicated to cover in this class, but the main reason we will not cover much javascript in the certificate is simply because I am not personally an expert javascript developer and as such, do not feel confident teaching the material.
But, I want to talk about 2 popular extensions to Javascript.
One is jquery which is a javascript library designed to help build javascript applications. It is the most popular javascript library in use today and is fully cross browser compatible.
The basis of jquery is the main jquery factory function which allows to call commands which also return jquery objects on which you can call other commands and so on.
That factory function is called $. That's right, dollar sign… It's parameter is a string which returns a jquery object with the selection.
For example, $("div.banner") will return a jquery object selecting all divs with the calss "banner".
You could call $("div.banner").addClass("hidden") to add the class "hidden" to all divs with the class "banner" for example.
There is a second function which allows to make calls to jquery utility functions. That function is called $. (in reality, these functions are simply prefixed by $. ). For example, $.each which iterates between elements of a list.
But jquery is also useful for helping building code using the second type of library, AJAX, via it's function $.ajax, which is much easier to do than without a library.
So, that brings us to AJAX. What is it?
AJAX stands for Asynchronous Javascript and XML.
Let's be first explain and make it clear that server-side code is executed during the compilation of the page and before it is sent, while client-side code is executed by the browser and thus, after the page is sent.
It is possible to customize the client-side code in the server-side code but it impossible for the client-side code to influence the server-side code without reloading the page… unless you use AJAX.
AJAX is not a single piece of technology but rather a combination of tools used to allow client-side code (javascript) to execute server-side code( such as php), without reloading the page.
This is done via the DOM (Document Object Model) function "XMLHttpRequest" which allows Javascript to make an HTTP request and append the result of the request to the document object model.
In short, this allows to make a call to a php script, and add the result to the page, without reloading it.
A form can can filled, and submitted, for example, without reloading it. Even better, a textbox can be hooked via AJAX to send the data you are typing to the server as you type it to keep a "draft" of your document for later retrieval if you close your browser without submitting.
Facebook, for example, makes heavy use of AJAX to refresh your newsfeed allow you to post new status or comments without reloading the page.
Sadly, this is all we will cover on jquery and AJAX for now. We will touch a little jquery in a future class, but AJAX will be reserved for the last classes of the certificate, if touched at all.
And this concludes this 4th lecture, the most technical so far and yet, it only touched the basics of each of the 3 components.
Don't worry, when we explore HTML and CSS in more depths, more technical introductions will be used, but you already know the basics of both.
The assignment for this week? I think you might have seen it coming: you need to take last's week assignment, convert your text document as specified in the that assignment, and format it as proper HTML.
There were 3 parts of this assignment.
Part 1 specifies something to write on the first line, it now needs to be the title of the page, as well as the page header displayed at the top of the page.
Part 2 should be placed in a paragraph.
Part 3 (The list of ports) is a list, so you should use the proper HTML markup to display it (hint, it is presented in the class).
This document needs to be xHTML compliant, meaning that:
1 ) All tags are closed
2 ) All tags are nested properly (if you have a problem with this, place a comment)
The deadline is still September 1st. Next week's assignment will NOT modify this assignment, but it will build on top of it.
Well, client-side development tools are pretty much divided in 3 types of tools:
1 ) Mark-up languages
2 ) Stylesheet languages
3 ) Scripting languages
Let's start with Mark-up languages.
If I were to ask you to name me what are the main mark-up languages, you would probably start with HTML, and then, struggle to find another one.
So, I'll help you, the 3 main Mark-Up languages are HTML, xHTML and HTML5, which are really just different versions of HTML which are more or less compatible with each other. For the purpose of this introduction class, we'll skip over the difference and just explain that xHTML was an improvement over HTML to make it also XML compliant, and that HTML5 adds to HTML much more advanced features which were reserved in the past for scripting languages.
HTML is a language composed of tags. For example, to mark a word in bold, we would use <b>text in bold</b> where <b> starts the bold section and the </b> ends the segment. In xHTML, a tag finishing with a / is empty, like <hr /> for example, which make and Horizontal Ruler.
Everything between a < and a > will not be printed on the page and as such, if a browser encounters an unknown tag it will usually know not to process it.
In reality, there are only 2 types of tags but I like to divide them in 3 groups:
1 ) Layout tags
2 ) Block tags
3 ) Inline tags
Layout tags make the main structure of your webpage and constitute the 4 requires tags all HTML pages are supposed to have:
A) The <html> tag, which usually start your document, which is closed with </html>, usually the last tag of a page.
B) The <head> tag with contains header information not displayed in the browser. It is always the first block inside the html block
C) The <body> tag which is the second block and contains the data outputted to the browser
D) The <title> tag which is contained in the <head> block and which defines the title of the page
Block tags are tags which use all available width and force a line break. For example, the <p> tag delimits paragraphs and as such, always start on a new line and use the full width: you can't place anything on the same line as a paragraph normally.
Inline tags however, only use the space they need and do not start a new line, or force next elements to be on a new line.
There are tons of tags, like h1 to h6 which are headers, where h1 is usually the page header, h2 the section headers and h3 the content elements headers (all of which are block elements) or div and span which allow to set a class or an id to a section. They are both pretty much identical to each other, but div is a block element while span is an inline element.
One pair of tags that I find really interesting are <ul> and <li> which are normally used to display an Unordered List and its list items or, if you prefer, a bullet point list. A list could be like this:
<ul>
<li>This is the first element</li>
<li>This is the second element</li>
<li>This is the third element</li>
</ul>
What's really interesting is that this markup (or set of tags if you prefer), had become pretty much the standard for coding website menus.
Have you ever seen a menu coded with an unordered list? Sure, the top menu of the current forum is encoded with an unordered list. In fact, most modern menus use an unordered list and yet, we very rarely see a bullet point list for a menu.
Why? Because of the second part: The stylesheet.
The most common stylesheet language is CSS, or Cascading Style sheet. The alternative is, well, wait a minute I am sure I know it. Oh, that's right, CSS pretty much has a monopoly on stylesheets.
Is it perfect? Not at all, and as such, there are javascript (which will see learn about soon) extensions to CSS which add new features like LESS, but we'll stick to the basic.
What is CSS? It's a declarative language which allows you to change the style or behaviour of HTML elements (content wrapped in tags) in a cascading fashion.
A CSS block starts with one or more selectors, which are used to select which HTML element(s) the style will apply to. Then, within curly braces, you have CSS styles applied to CSS properties.
Let's start with selectors. In a future class, we'll learn more about them for a whole lecture, but for now, let it be known that there are 3 main types of selectors: type selectors, which selects elements of a certain tag type, class selectors, which select elements with a certain class, and ID selectors which matched the element (singular) with a particular ID (which is unique in the document).
Tags selectors are spellers as they are, p for paragraphs, ul for unordered lists, li for list items, etc…
Class selectors are prefixed with a "." like .classname
ID selectors are prefixed with a #, like #id
They can be merged, like p.quote which which only select <p> tags with the class "quote".
Once you've selected an elements, what can you do with it? You can change multiple properties.
For example: "color" changes the text color, while "background-color" changes the background color.
We would set:
p.quote{
color: white;
Background-color: black;
}
And we would have white text on a black background.
We have properties for margin (the distance between the element and other elements), padding (the distance between the sides of the elements and its content), border, size (width and height).
But the most interesting part are properties which change the behaviour of elements, notably the property "display".
I've explained that aside from the layout tags, all HTML tags are either block or inline. With the display property, you can override that can change an inline tag to a block tag and vice versa. You can even set display to "none" and thus, remove the tag from the output of the document.
With "position", you can override where the element goes, such as in an absolute position on the screen or fixed in space even if your scroll the page, instead of being the default "static" position of being displayed where they are in the flow of the document.
With CSS, there are thousands of new properties which allow you to reused the same HTML, such as a <ul> and <li> list in millions of different ways.
We'll cover CSS in a future class of this certificate.
But final thought: why is it cascading? Because properties applied to a more general selector are passed down to more specific selectors. If you set a font-family to "Verdana" on the body tag, the whole page will have the font-family "Verdana" except if overridden by a more specific selector (such as a selector with a class instead of just a tag, or a selector with an ID instead of just a class).
You can even nest the selectors.
P a img{
Border: 3px black solid;
}
Will put a 3 pixels wide black solid border around all images (img) contained in a link (a) contained in a paragraph (p).
There are even pseudo-selectors, like :hover or :first-letter, which allow you to select elements when the mouse cursor is above them or just the first letter of the element.
So, what is the strength of CSS? It allows to break free from the HTML when designing. In theory, you could reuse the same HTML file for multiple, completely different designs and only use CSS to change the look, This allows to provide a better separation between content and presentation, something which we will constantly talk about during this certificate.
If you want to see an example of this, the website www.csszengarden.com/ uses the exact same HTML code for 212 different designs submitted by designers all over the world which were selected for their look. A further 1039 were submitted but not selected.
How do you use CSS declarations?
There are three ways:
1 ) You add them in the head section of your document, inside a <style> tag.
2 ) You put them in a .css file and include them in the head section of your document. There are multiple ways to do that, such as the link tag:
<link rel="stylesheet" type="text/css" href="cssfile.css">
3 ) You set the style property of an HTML object, such as:
<p style="color: blue">This is blue text</p>
You should only use the style property very rarely.
CSS could have its own full course, but this certificate is about web developers and not web designers. You will only learn the basics a developer needs to know to make a website, but it should be enough to follow more advanced CSS tutorials.
That leaves us with scripting languages.
Just like CSS, the only real contenter is javascript which, despite it's name, is NOT JAVA. This misconception is so widespread with non developers is has almost begun to be used to weed out the beginners from the experiences. I've seen an example: Java and Javascript are as similar as a car and a carpet are… In reality, the two languages are unrelated other that since they are both based on C, they share very similar syntax.
Originaly, Javascript was named "Livescript" but was changed to Javascript in a co-marketing deal between Netscape (the original creators of Javascript) and Sun (the original creators of Java).
Naming conventions were then united to make Java developpers feel more at home when writing Javascript, at least, that's the theory.
So, Javascript is a scripting language run in your browser which lets you manipulate the DOM, the Document Object Model, which is the list of all of the HTML tags of a site along with all of their properties.
This means that Javascript is able to manipulate HTML and CSS.
Sadly, once again, Javascript, is too complicated to cover in this class, but the main reason we will not cover much javascript in the certificate is simply because I am not personally an expert javascript developer and as such, do not feel confident teaching the material.
But, I want to talk about 2 popular extensions to Javascript.
One is jquery which is a javascript library designed to help build javascript applications. It is the most popular javascript library in use today and is fully cross browser compatible.
The basis of jquery is the main jquery factory function which allows to call commands which also return jquery objects on which you can call other commands and so on.
That factory function is called $. That's right, dollar sign… It's parameter is a string which returns a jquery object with the selection.
For example, $("div.banner") will return a jquery object selecting all divs with the calss "banner".
You could call $("div.banner").addClass("hidden") to add the class "hidden" to all divs with the class "banner" for example.
There is a second function which allows to make calls to jquery utility functions. That function is called $. (in reality, these functions are simply prefixed by $. ). For example, $.each which iterates between elements of a list.
But jquery is also useful for helping building code using the second type of library, AJAX, via it's function $.ajax, which is much easier to do than without a library.
So, that brings us to AJAX. What is it?
AJAX stands for Asynchronous Javascript and XML.
Let's be first explain and make it clear that server-side code is executed during the compilation of the page and before it is sent, while client-side code is executed by the browser and thus, after the page is sent.
It is possible to customize the client-side code in the server-side code but it impossible for the client-side code to influence the server-side code without reloading the page… unless you use AJAX.
AJAX is not a single piece of technology but rather a combination of tools used to allow client-side code (javascript) to execute server-side code( such as php), without reloading the page.
This is done via the DOM (Document Object Model) function "XMLHttpRequest" which allows Javascript to make an HTTP request and append the result of the request to the document object model.
In short, this allows to make a call to a php script, and add the result to the page, without reloading it.
A form can can filled, and submitted, for example, without reloading it. Even better, a textbox can be hooked via AJAX to send the data you are typing to the server as you type it to keep a "draft" of your document for later retrieval if you close your browser without submitting.
Facebook, for example, makes heavy use of AJAX to refresh your newsfeed allow you to post new status or comments without reloading the page.
Sadly, this is all we will cover on jquery and AJAX for now. We will touch a little jquery in a future class, but AJAX will be reserved for the last classes of the certificate, if touched at all.
And this concludes this 4th lecture, the most technical so far and yet, it only touched the basics of each of the 3 components.
Don't worry, when we explore HTML and CSS in more depths, more technical introductions will be used, but you already know the basics of both.
The assignment for this week? I think you might have seen it coming: you need to take last's week assignment, convert your text document as specified in the that assignment, and format it as proper HTML.
There were 3 parts of this assignment.
Part 1 specifies something to write on the first line, it now needs to be the title of the page, as well as the page header displayed at the top of the page.
Part 2 should be placed in a paragraph.
Part 3 (The list of ports) is a list, so you should use the proper HTML markup to display it (hint, it is presented in the class).
This document needs to be xHTML compliant, meaning that:
1 ) All tags are closed
2 ) All tags are nested properly (if you have a problem with this, place a comment)
The deadline is still September 1st. Next week's assignment will NOT modify this assignment, but it will build on top of it.
