how to become an explorer of the world cc-by lemasney

WEEK 2 (1/27-2/1)

Looking back:

  • A look back at Week one.
  • A review of Google Drive
  • Sharing Drive folders/files to public versus sharing to me
  • Revisions in the syllabus and site are ongoing.

Lecture:

Read the following article in the next few minutes.

“This whitepaper explains the underlying infrastructure and technologies that make the Internet work. It does not go into great depth, but covers enough of each area to give a basic understanding of the concepts involved. For any unanswered questions, a list of resources is provided at the end of the paper.” found in How Does the Internet Work? at https://goo.gl/2P1aXj

Reading review:

  • What is an IP address?
  • What is the Domain Name Service (DNS)?
  • What is HTTP?

Questions to ponder, then be able to answer clearly, this week:

  • What is FTP and SFTP?
  • What is HTML?
  • What is CSS?
  • What is source code?
  • How do I see the source code?
  • How can I play with the CSS?
  • What is a server?
  • What is a client?

Demo:

File Directory and structure:

  • Domain Structure versus Server File Structure
  • The HTTP and FTP servers
  • The home directory on the server
  • The public directory for html
  • your files and folders

File structure rules:

  1. File names have no spaces or strange characters
  2. File names are lower case
  3. All files in folder named project1_website
  4. Folders named images, fonts, js inside project1_website folder
  5. All images are inside the images folder
  6. External stylesheet called project1.css
  7. All css in external file
  8. No psds uploaded
  9. All pages titled
  10. All images have alt text

Important basics of web development:

Resources:

Introduction to HTML (w3 schools)

Inserting HTML Elements (w3 schools)

CSS Basics (w3 schools)

Adding CSS Rules (w3 schools)

Code:

HTML elements
  • <!DOCTYPE>
  • <html>, <head>, <body>, <title>
  • <p>
  • <h1>, <h2>,
  • <hr>
  • <!– –>
  • <br>
  • <a>

 

HTML elements CSS selectors CSS properties
  • <link>
  • body
  • h1, h2, h3
  • p
  • a
  • a:link
  • a:visited
  • a:hover
  • a:active
  • grouped selector
  • hr
  • background-color
  • color
  • hex & rgba(255,0,0,0.3)
  • font-family
  • font-style
  • font-weight
  • font-size
  • text-transform
  • text-align
  • text-indent
  • text-decoration
  • border
  • height

 

Review:

  • CSS tutorials
  • HTML tutorials
  • Coding tools

Questions to be able to answer:

  • What is HTTP?
  • What is FTP and SFTP?
  • What is HTML?
  • What is CSS?
  • What is source code?
  • How do I see the source code?
  • How can I play with the CSS?
  • What is a server?
  • What is a client?

Due Next Week (2/3):

Remember to share a single Google Drive folder with me with the name “DMA145 – lastname” where lastname is your actual last name, e.g. DMA145 – lemasney. In it, place four folders, project1,project2,project3, and project4.

In each of those, put your weekly assignments. weeks 1 through 4 in project 1, and so on. Put your answers in the project folder we are working on, named sensibly: Drive/DMA145lemasney/project1/question 1 on color.doc or something like it. When you put anything inside the DMA folder, anywhere in it, even subfolders, I’ll have access to see it.

Discussion Question:

2: HTML ELEMENTS

Look at the source code for the website you picked last week. List the HTML elements that are used in the homepage of the website you picked. How does the code of a website that is online differ from the code you created this week? How is it the same? Is there anything that surprises you about the way that the code is written? Support your answer. (Please include a link.)

How to view source code tutorial (Wikihow)

Weekly Assignment:

Basic HTML

Create a basic HTML page for your historical figure. You can copy and paste information from their wikipedia page.

Content Requirements: (minimum)

  • 1 headline (H1-H6)
  • 1 sidebar (DIV container)
  • 3 paragraphs
  • All names of people linked to their wikipedia pages

Technical Requirements (use elements from Code section of agenda)

Advertisements