Introduction to Information Technology/Web Technologies

Introduction

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

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

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)

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

HTML 2.0

Published in 1995, HTML 2.0 flushed out the RFC system, allowing detailed mechanical explanations of the system.

HTML 3.2

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

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

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

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)

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

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)

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

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.

Ex: h2 style = "color: blue"

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.

Ex: <style>
body {background-color: white;}
/*This is a comment!
'Body' is the selector,
'background-color' is the declaration*/
h2 {color: blue;}
</style>

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.

Web Design Programs

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

Client-Side Scripting

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

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

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

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

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