Anatomy of Technology

Unit 2

Hi Again! Welcome :)

Let's Get Started

  • What is the Web? How does it work?
  • What makes up a web page?
  • What is HTML?
  • What is CSS & how does it work with HTML?
  • What are databases? CMS's?
  • Exercises: Facebook & RH+ WordPress as CMS example, creating practice HTML files

So, what is the web?

....please don't say it's fuzzy and in a cloud....

Basic Web Recap

  • Internet/Web- group of linked computers, (servers) which are connected through a unique communication protocol called Internet Protocol (IP)

Image Source

Real-time global Map of the World's Web Usage

Go to the Real-time Web Monitor Here

Basic Web Recap

Web server

  • Sends out web pages when they are requested by YOU surfing on a web browser (Chrome, Firefox, IE, etc.).

 

  • The “host and client communicate using an agreed ’language’ called HTTP (HyperText Transfer Protocol).”

 

  • Examples are a print server (connects printers to the network) and firewall (or interface between computer and the internet to limit access to networks)

 

Basic Web Recap

  • Web browser- software application, just like Microsoft Word, whose sole responsibility is to decipher code (HTML) obtained from a web server upon request (request communicated through TCP/IP protocol).

​

  • Web pages– written in text file with HTML, then “uploaded to a host computer” running web server software such as Unix or Apache.

URL's:

 

 

 

Uniform Resource Locator, is the location of a file on the web,

on a server

What is IP?

  • IP is actually an abbreviation of TCP/IP. Which stands  for Transmission Control Protocol/Internet Protocol.

  • The unique identifier for a computer is called its IP address

  • Almost all networks today "including all computers on the Internet" use the TCP/IP protocol as the standard to request web pages

http://whatismyipaddress.com/ip-facts, http://computer.howstuffworks.com/internet/basics/question5491.htm

 URL vs. IP address

  • URL—web addresses contains web protocol (HTTP, FTP) vs.
  • IP—address or unique identifier for a computer either physical or virtual as in the case of shared hosting
  • Similarities – both identifiers, URLs actually created because IP addresses where too difficult to remember as they do not relate to site’s purpose like URLs do

 

  • When URLs entered/requested in order to complete the request a Domain Name Server (DNS) has to convert the domain name (URL) into an IP address, otherwise the request would fail because the computer would be unable to find the host

 

 

A remote computer needs your IP address (converted from URL) to deliver the web page you requested on your computer

In the same way that when you want to send a letter to a friend (and you have their name) you need their mailing address

Sally Burton

1 Nightmare Drive

Nightmare City, PA

57.164.46.81:8000

qmh.haverford.edu

My friend Sally

What is HTML?

Hypertext Markup Language

  • According to W3 Schools HTML is a "standardized markup language for describing web documents (web pages)."
    • A markup language is "a set of markup tags."
    • HTML web pages are described by HTML tags
    • Such as color, font, graphics and hyperlink tags, etc. all of which describe different web page content. 

http://www.w3schools.com/html/html_intro.asp

What Makes Up an HTML File?

<HEAD>

<TITLE>

<BODY>

<HTML>

<!DOCTYPE HTML>

<SCRIPT>

<!doctype html>

<html>

<!-- this is an HTML comment -->

    <head>
    
        <title> </title> <!-- you need a closing tags on most elements 
                              with the exception of: <img>, <br> tags-->
        
    </head>

<body>


    <!-- this is where your content will go!-->




</body>

</html>

<TAGS>

What is CSS ?

  • CSS stands for Cascading Stylesheets, stored in .css file
  • Stylesheets are external (or outside of) your HTML files they are describing
  • CSS describes how HTML elements/tags are going to be displayed on a web page
  • CSS can set up the layout of multiple web pages making building your website easier
  • In the HTML file you link to your .css file which is how the style is able to be translated into your .html file. 
  • We will be covering HTML with CSS in the second part of this session (not today). 

What is a database? What is a Content Management System?

  • Database – a collection of information or data usually structured, held in a computer, and with multiple access points.

  • Content Management System – a system which manages workflow processes and allows editing, modifying and publishing content.

Databases? 

 

 Content Management Systems?

Libguides!

Playing with Facebook, a CMS

1. Right-click inspect element

2. In Styles section (a CSS specifies the style of a whole site) click on Background: Color square select color picker and change your color

What is Hypertext, Multimedia and Hypermedia?

  • Hypertext– nonlinear structure, contains links to other texts or links to graphics, video and sound (Hypermedia). User(s) can navigate through a web site(s) through hypertext, creating their own path to needed information.

 

  • Multimedia– web pages contain these type of elements that you see and/or hear, and can be in many different formats, i.e. jpg, gif (pictures), MP4, WMV, MP3 (video and sound files).

Hypertext, Multimedia and Hypermedia (cont.)

  • Image sourced from : Overymyer,S. (2015). 608 Week 7 Lecture Notes; Universal Design, HyperText and the World Wide Web.

Ok, Let's Do Some Testing!

<!doctype html>

<html>

<!-- this is an HTML comment -->

    <head>
    
        <title> HTML TESTS </title> 
        
    </head>

<body>


    <!-- this is where your content will go!-->

<h1> This is a heading. </h1>

<h3> This is a slightly smaller heading. </h3>

<h6> This is the smallest heading you can have. </h6>

<!-- change an h1 to p or button-->




</body>

</html>

live version

Adobe Kuler to add color codes

Session 2: #1 CMS Example 

Reclaim Hosting/WordPress (Blog) - works as a content management system

  • When you change information in a CMS, the CMS actually changes the database that holds the HTML coding. 
  • For example if you change the title of your web page in  the user interface, the CMS actually changes the header or h1 using MySQL (query language that retrieves relevant data) and PhpMyAdmin (executes actions in the database) and renders the HTML
  • Another example is changing the theme MySQL pulls the data from the database (style, color) and PhpMyAdmin executes action in the database and renders the HTML

Session 2 #1: Word Press as CMS exercise

  1. Log-in to Reclaim Hosting, click on 'C Panel' in top toolbar
  2. Under ‘Featured Applications’ click on Word Press

  3. Click on ‘Install this Application’

  4. Once it is installed click on your admin link i.e. domain name/wpadmin

  5. Edit posts and pages

  6. Go to the web address for each page and see how your changes are implemented, i.e. yourdomainname.com/the web page name or click on 'view post'

  7. You can look at the user interface of WordPress, your completed web page and you can also right-click on your completed web page and select 'view page source' to see the html coding that composes and renders your web page as you see it. You can also look at the 'text' tab of your posts and you will see the html code. 

  8. Also look at the PhpMyAdmin to see where the information is coming from (databases of information)

Session 2 #1 : Word Press as CMS exercise screen recording video of directions

Session 2 Ex. #2: Creating more practice html files

  1. Grab the "Files for Exercise 2 using Reclaim Hosting and Stylesheets" from Unit 2 of the LibGuides 
  2. Upload them to your Reclaim Hosting public_html folder.
  3. Make sure to create a separate folder for the .css (stylesheet file) titled 'css' and save the .css file there.
  4. Go to your domain name/your file name to see the difference between the two .html files.
  5. One has the styling structured inline and the other has an external stylesheet-- this is a practice you want to follow for using HTML5 (current HTML)
  6. Both files also contain information on beginning elements needed or wanted for all HTML files

Server vs. Client Side

Server side (back-end) and client side (front-end) communicate using HTTP.

The server serves the web pages and generates content using languages such as PHP (this script runs on the "server which hosts the website and sends down the HTML code") i.e. 

<h1 id="hello"><?php echo 'Hello'; ?></h1> (Code Conquest, 2014).

The client (can be a web browser) displays the web page to the user (YOU) using languages such as JavaScript (it "runs scripts on your computer after you've loaded a web page") i.e. 

<script>
    document.getElementById('hello').innerHTML = 'Hello';
</script> (Code Conquest, 2014).

The User (YOU) "uses the client to surf the web, fill in forms, watch videos online, etc " (Locke, 2015)

 

References

Anatomy of Technology

By Digital Scholarship Fellows

Made with Slides.com

Anatomy of Technology

This is the second unit.

  • 2,588

More from Digital Scholarship Fellows