Webdev Technologies
Lesson Links
Web Page Development
Editing css and html
Free Website Services
Freewebs
Jimdo
Roxer
Synthasite
Webnode
Wix
GogoFrog
Weebly
Homestead
Free Website Templates & Tools
Template Box
Open Source Web Design
Free Layouts
Web Design Tips
Six Revisions
Smashing Magazine
Web Design from Scratch
Five Main Technologies for Web Development
1. HTML (Hyper-Text Markup Language)
HTML is the primary language of the internet. Most web pages are created using HTML.
In the past, HTML controlled all aspects of a web page. Most designers used tables to organize the layout of a web page. HTML “told” the browser (i.e. Internet Explorer, Mozilla Firefox) what text to show, how to show it (color, size, etc.) and where to put it. HTML also told the browser where to place graphics, how they should be displayed and how hyperlinks should look as well. Today, most web designers use HTML along with other technologies like CSS and JavaScript to build web pages.
Here are some things you need to know about how HTML is written.
First and foremost - anything written within brackets <p> is HTML code. These are the specific directions the browser is interpreting. The information written in the brackets is referred to as a “tag”. You will need to learn some tags in order to effectively edit HTML.
Second - tags generally have an open and a close. The “open” tag is written in brackets. For example - the open tag for beginning a paragraph is <p>. The close tag is the same as the open tag except the text is preceded by a forward slash. The close tag for the end of a paragraph is </p>.
Third - HTML is not directly visible when a web page loads. It’s in the background telling the browser what to do. HTML is a language that web browsers “read” so they know what to show when a web page loads. If you want to see what the HTML looks like, go to the view menu in the browser and select “source” or “page source”.
Some of the common tags used when writing HTML
| <html> <head> <link> <script> <body> <div> <table> <tr> <td> <p> <ul> <li> <a href> |
tells the browser it’s reading an html document gives the browser additional information about the document Not used for normal hyperlinks. Instead, links to other documents within the site tells the browser some directions (via javascript) need to be run this is where the information on the page starts this separates the page into a new section this sets up a table - the same way you would create one in Word creates a row in a table creates a cell (data cell) in a table begins a new paragraph creates an ordered (numbered) or unordered list (bulleted) creates a list item in a list used to create a hyperlink |
2. CSS (Cascading Style Sheets)
CSS files are documents used to control the format of a web page. CSS can be used to format text as well as to control aspects of links, lists, graphics, headings, footers and menus. CSS uses the same type of language as html. CSS documents are commonly called style sheets
Most web developers use a combination of HTML and CSS to control the content and look of a web site. Since the introduction of CSS, HTML is mostly used to add the content. Modern web developers use CSS to control how web pages look. Take a look at CSS Zen Garden to see how it works. Every page on CSS Zen Garden has the same content, but they all look different because each page is controlled by a different style sheet.
A CSS document is “linked” to a web page with html code in the page head that says something like:
<link href=”css/main.css” rel=”stylesheet” type=”text/css” />
The CSS text has directions that basically tell the browser what to do when it finds certain sections on the web page. CSS can be used to format text, pictures and hyperlinks. CSS is also used to tell the browser how to organize the page. With CSS, a designer can control the look of the entire site with one document.
If a designer wanted to change the look of a web page before CSS, he had to go to each page and edit the HTML to give the browser new directions for how the page should look. For example, let’s say I was changing the color scheme of my web page. I decide I want to change my font color from black to dark green. Before CSS, I would have to go to each page and edit the hexdec value for the color change. My school site hovers between 30 and 50 pages. Editing the HTML for each page would take a long time.
CSS gives me the power to change the look of the entire web page by editing a single document. Essentially, as the web page loads, there is a line of code that tells the browser to read the CSS document for directions on how to display the page.
Here’s some sample code from a CSS document. Can you figure out what some of the following CSS lines do?
body {
margin:0;
font-family:”Trebuchet MS”, Arial, Verdana;
font-size:14px;
color:#555555;
background-color:#FFFFFF;
text-align:left;
background-image:url(../images/topback.jpg);
}
a {
color:#1961a4;
font-weight:bold;
text-decoration:none;
}
a:hover {
color:#1961a4; /*lighter blue*/
text-decoration:none;
}
ol,ul {
}
li {
list-style-image:url(../images/appbullet.gif);
line-height:20px;
text-align:left;
Figuring out what CSS commands do is pretty easy. The tricky part is knowing what part of the html document is being controlled by a specific section of CSS code.
If you want to learn more about html or CSS, there are tons of tutorials, explanations and reference sites on the web. I suggest including “kids” and “learning” in your search. That will help you find a kid-friendly site. The most authoritative and complete CSS reference is the World Wide Web Consortium site.
3. JAVASCRIPT
JavaScript is a “scripting” language that adds functionality to web pages. The best way to explain what JavaScript can do is to say it’s an invisible, reactionary script that the computer follows when the user does certain things. If you’ve ever gone back to a web page that “remembers” you, that was done with JavaScript. Cookies (small .txt files dumped onto your computer when you visit web pages) are controlled using JavaScript. Some animated features (blinking cursors, falling text backgrounds) are controlled with JavaScript. Pop-up windows and forms can also be controlled using JavaScript. Javascript isn’t limited to just pop-ups and cookies. The MMORPG Runescape is run with javascript.
If you want to see some of the cool things that JavaScript can do, check out the Rainbow Arch Script Library or The JavaScript Source. A lot of people use scripts when they add to or customize MySpace pages. Whenever you copy and paste code that has the <script> tag, you’re using JavaScript to add features to your page.
4. AJAX
AJAX stands for Asynchronous JavaScript and XML (Extensible Mark-up Language). AJAX is a method of designing web pages that allows the web page to pull pieces of information from the server instead of reloading the entire page every time there is a call for new information. AJAX is a “technique” designers use to help pages load faster and have additional features. AJAX uses JavaScript and XML together to enable these features. Two web services you’ve seen that use AJAX are iGoogle and Zoho.
5. FLASH
A popular technology for adding animation and interactivity to web pages. Flash requires paid-for software (Adobe Flash) to create Flash applications. 99% of the games deployed on the web were created using Flash. People who build MySpace add-ons often use Flash. You know you’re using a Flash file if it has extensions .swf or .fla. You can tell you are playing a Flash game online if you right click and see Flash Player version information
Back to Web Page Development
Subscribe 