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

3 thoughts on “WEEK 2 (1/27-2/1)

  1. Looking at the source code for Amy Schemers website, you can clearly see all of the elements, links, attributes etc that we just learned about this week. Comparing her website to the one that I just made for my historical figure, it’s obvious that her website is much much longer and way more detailed. I see some resemblance. For example, like , , , and more. All of the obvious parts are the same as mine. However, what I did find interesting was the spacing. On her website source code, the spacing on the html looked different than mine. Mine was all flushed to the left, where as hers was flush left, tabbed, and so on. I find that interesting and I wonder as to why it looks like that. Here is the link to the source code of her website view-source:http://www.amyschumer.com/ and here is the link to my website file:///Users/cailinshymko/Desktop/gustave.html

    Like

  2. Discussion Question

    Kevin Hart’s website is different from mine because he has a lot more links and more organization because he used the ID & the class attribute. He has a lot of images compare to my link, and also a lot of DIVs (Hart’s web is made out of a lot of well organized DIVs).

    Hart’s web also made use of the CSS style sheet which is a big plus in keeping everything organized and an easier way to customize his contents such as DIV, styles etc. He also added comments, which is really recommended to keep everything organized. He’s comments are like titles to each part. For instance the “Twitter Card”, under this comment is held all that has to do with his twitter and he does the same for the rest such as Facebook etc.

    My link doesn’t have all these organization and all these functions which are more of professional.

    Link to Hart K. web: http://www.kevinhartnation.com/

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s