Introduction to Information Technology/Web Technologies
Introduction[edit | edit source]
In order to make websites look and function a certain way, web developers utilize different languages. The three core languages that make up the World Wide Web are HTML, CSS, and JavaScript.
In the IT world, the internet is an essential platform, whether it`s for developing or for consumer use. When developing a website, typically three main languages come into play. These languages are JavaScript, CSS, and HTML. HTML is the backbone of most webpages. Essentially, it is used to create the structure of how a specific website would look like, from the headings, to the paragraphs, the body, links, and even images.
Markup Languages[edit | edit source]
Markup languages are the languages in which the web is written. The most common markup language used is HTML, which uses tags to annotate text so that a computer can then manipulate the text. Most markup languages are human readable, and use annotations that are distinguishable from the annotated text. There are many different kinds of markups and languages, but all are consistent in the way in which they annotate documents.
Hypertext[edit | edit source]
Hypertext is defined as the arrangement of information inside a database that allows the user to receive information and to navigate from one document to another by clicking on highlighted words or pictures inside the primary document. Hypertext is the base of the World Wide Web, because it enables user to click on other links to get more information. Hypertext is a term used for all links, whether it appears as texts or other graphical part.
Hypertext Markup Language (HTML)[edit | edit source]
HTML is the conventional markup language used to create and edit web pages and web applications. HTML is used for creating the basic structure of a website. HTML consists of different elements preceded by an opening tag, <tag>, and a closing tag, </tag>. The content between the tags, <html> and </html>, is the content of the webpage. The content between the tags, <head> and </head>, is the title of the webpage. This text is displayed between the <title> and </title> tags. The content between the tags, <body> and </body>, is the main content of the webpage. The content can include links , paragraphs, headings, and various other elements.
Here are the most commonly used HTML tags:
| Tag | Description |
|---|---|
| <h1> - <h6> | Gives a web page a heading. 1 is the largest heading you can have and 6 is the smallest. |
| <p> | Starts a paragraph in your web page. |
| <i> | Italic font style. |
| <b> | Bold font style. |
| <a> | Inserts hyperlinks onto a web page. |
| <ul> & <li> | Starts an unordered or ordered list. |
| <!DOCTYPE> | Defines the document type of the web page. |
| <!-- --> | Allows you to insert comments into your HTML code. Comments aren't displayed in on the web page, but are helpful for organization. |
| <img> | Inserts an image onto a web page. |
| <br> | Inserts a line break between bodies of text. |
HTML Major Versions[edit | edit source]
HTML 2.0[edit | edit source]
Published in 1995, HTML 2.0 flushed out the RFC system, allowing detailed mechanical explanations of the system.
HTML 3.2[edit | edit source]
Published in 1997, HTML 3.2 performed major housecleaning on the structure of HTML. It removed mathematical formulas, reconciled code overlap, and adopted Netscape's Visual Markup Tags.
HTML 4.0[edit | edit source]
Published at the end of 1997, HTML 4.0 introduced 3 different versions and browser specific plugins. 4.0 Allowed custom experiences tailored to specific browsers.
XHTML[edit | edit source]
Released in 2000, XHTML fused HTML and XML into a language that was very precise, almost too precise. XHTML is widely considered a tedious and difficult language.
HTML 5.0[edit | edit source]
Released in 2014, HTML 5.0 is the currently used version of HTML. HTML 5.0 removed some of the tedium and severity of XHTML, while keeping its ability to remain precise and detailed.
Hypertext Transfer Protocol (HTTP)[edit | edit source]
HTTP is the protocol used by the World Wide Web that determines how messages are formatted and transmitted. It also directs web servers and browsers to what actions they should take in reaction to several commands. When you open your web browser and enter a URL, you are using HTTP. The Web server directs it to get and transmit the requested Web page based on the HTTP command that is sent.
HTTP Protocol[edit | edit source]
HTTP is an application used as the fundamental foundation of communication on the web. HTTP is the first letter you type in when inputting a web address. HTTP is a request - response protocol. The client might request something and the http allows the client to access the information. Like when we updated our virtual machines the request we wanted was to go get updates for the software and http request went out and got updates. If you were on a bank website or the wikibook site it would be https the ‘s’ meaning secure. That means that the computer is communicating on a secure network.
Cascading Stylesheets (CSS)[edit | edit source]
CSS is a style sheet language standard set by W3C (World Wide Web Consortium) used to create and edit the visual presentation of web pages. CSS allows web developers to isolate a web page's content and visual styles into separate documents and gives better page layout control. An external CSS sheet is generally linked to HTML and XHTML, it also can be linked to XML, SVG, and XUL. HTML and Javascript, with CSS, is a vital part of technology used by the majority of interfaces for websites. This is also used in interfaces for mobile devices making the websites more engaging.
Here are the most commonly used CSS tags:
| Tag | Description |
|---|---|
| background | A shorthand property for setting all the background properties in one declaration. |
| color | Sets the color of text. |
| opacity | Sets the opacity level for an element. |
| border | Sets all the border properties in one declaration. |
| border-color | Sets the color of the four borders. |
| float | Specifies whether or not a box should float |
| padding | Sets all the padding properties in one declaration. |
| /*...*/ | Allows you to insert comments into your CSS code. Comments aren't displayed in on the web page, but are helpful for organization. |
| width | Sets the width of an element. |
| clear | Specifies which sides of an element where other floating elements are not allowed. |
Types of CSS[edit | edit source]
CSS can be incorporated with HTML in 3 different ways; Inline, Internal, and External.
- Inline styles add style to a single element on the page by placing 'style' after the element you wish to be styled.
- Internal styles create a style for a single document because the CSS is stored in the head of the HTML document. Internal styles are placed using a <style> tag around all style selectors.
- External style sheets exist in separate documents from HTML documents, allowing for better organization of style and structure. An external style sheet can be linked to all HTML documents making up a web site, allowing a web developer to style the entire site (all pages) using one document.
Ex: h2 style = "color: blue"
Ex:
<style>
body {background-color: white;}
/*This is a comment!
'Body' is the selector,
'background-color' is the declaration*/
h2 {color: blue;}
</style>
Web Design Programs[edit | edit source]
Web Design Programs help the webpage creator manage and create the content of a website. Many Web Design programs have many built in tools that ease the process of creating a website. Such programs are Dreamweaver and Sublime. There are also publishing programs like Wordpress and Ghost that allow the user to have more of a GUI based interface for blogging and managing a website.
Sublime
Sublime is a text editor that allows the web developers, programmers, software engineers, etc. manipulate code. It's not only for HTML and CSS it can be set-up for many different programming languages and new productivity tools. One contribution that Sublime has that many do not is the "Package Control" Tool. The tool gives you full access to an entire library of content to better your coding experience. For example, there is a package you can install called Emmet, helping in typing massive amount of HTML, if you type "html:5" and press "tab" then emmet will push out all the correct syntax for an HTML 5 document.
SASS
SASS is some what like emmet but is more of a language. It is a Ruby engraved language that gives CSS much more capabilities like variables and nesting. Like emmet it makes writing CSS much faster and more efficient saving the programmer lots of time.
Dynamic Web Content[edit | edit source]
Client-Side Scripting[edit | edit source]
Generally refers to computer programs on the web that are executed by the user's web browser, instead of on a web server, enabling web pages to be scripted. Client-side scripts do not require additional software on the server but instead utilize the user's web browser to understand the scripting language in which it is written.
Server-Side Scripting[edit | edit source]
Server-side scripting is a technique used in web development that involves using scripts on a web server which produce a unique response for each user's request to the website.
Combination technologies[edit | edit source]
When both client side and server side scripting collectively build a webpage it is known as a web application. This web application can manage user interaction, security, and help improve performance between the client and server. Web applications can include anything from online stores to instant messaging services as long as both server and client sides execute scripts to a achieve a common goal in unison.
JavaScript[edit | edit source]
JavaScript is a scripting language that is used along with HTML and CSS as the three core components of the World Wide Web. JavaScript has first-class functions and is used in most websites. JavaScript does not have any I/O which means that it has to be embedded in the host environment. JavaScript is also used in PDF documents, game development, and desktop and mobile applications. JavaScript is most commonly used to make DHTML by adding client-side behavior to HTML pages.
Worldwide Web Consortium[edit | edit source]
Worldwide Web Consortium (W3C) is an international community of web members to meet the Web standards. It was founded by Tim Berners-Lee, an inventor of the Web, back in the 20th century. W3C is designed to reach a full potential of the Web and to make it accessible to all users from all over the world. Also, another aim for W3C was to make standards to maintain the growth of the Web in a single direction rather than splitting into competing groups. Here are some standards by W3C:
- Accessibility
- Web Authoring
- Web Performance
- Cascading Style Sheets
- HTML5
- Web Fonts
- Widgets
- Media Access
- Mobile Web Applications
- Internationalization of Web Design and Applications
- Mobile Web Authoring
- XML
- Graphics
- RDF
- HTTP
And many more