Web I

Class 3

Spring 2023

AAV255

Assignment Recap:

Post your sitemap and wireframe links to the discussion in Canvas along with the required information, provide feedback to at least 3 others.

​

​

A brief history of the web

• Internet ≠ The World Wide Web
• The internet was created in the 60s as a network of computers for government researchers to share information.
• The “World Wide Web” was created later in the early 90s by Tim Berners-Lee as a way to allow anyone to send and receive data on the internet more easily. It utilized a few key concepts:
• Hypertext and Hyperlinks - the core idea of navigating information, you would have pages of hypertext connected by hyperlinks
• TCP or Transport Control Protocol → a connection between client and server computers to send information
• DNS or domain name system, every web page would have a unique name (a URL or uniform resource locator) a user could visit to view that content, both a domain and an associated IP address.

A brief history of the web

• HTML, CSS, and Javascript are languages that were developed so that a web browser can read, interpret, and display information on a web page.
• Today, the World Wide Web consortium (W3C) is an organization founded by Tim Berners-Lee that developers the standards for the web and its languages.
• The also develop accessibility guidelines via the “Web Content Accessibility Guidelines” or WCAG

How the Web Works

​

• Computers connected to the internet are called clients and servers
• Clients are computers like our phones and laptops that request and receive information from servers.
• Servers are computers that store the information that makes up a website, such as HTML, CSS, Javascript, and images, and send it to the client when requested.

​

Front-end and Back-end

​

• Front-end developers primarily work with client-side languages like HTML, CSS, and Javascript. These languages focus on how web pages are displayed.
• Back-end developers primarily work with server-side languages like PHP, Ruby, Java, C++ etc. These languages focused on communicating with stored data on the server dynamically.
• Full-stack is a term used for developers who work on both ends.

Static vs Dynamic

• Static websites can be built with just front-end languages and display the same content for everyone that visits. Interactivity is limited.
• Dynamic websites use server-side data to display and change content. It can be different depending on the user and process user-submitted data like forms.
• Dynamic websites often utilize Content-Management Systems (CMS) to make it easy for editors to create and manage content.

What the heck is HTML?

​

• Hypertext Markup Language - the language that defines the structure of web pages through the use of tags with attributes
• Hypertext refers to text that links to other text. A link is short for hyperlink.
• Markup refers to a structure for interpreting and presenting content

What the heck is CSS and JS?

• We’ll cover these in detail in later classes, but for context..
• HTML creates the structure of the page
• Cascading Stylesheets (CSS) defines the styling for HTML elements. Can be applied directly to elements or as “classes”.
• Javascript (JS) allows you to make a page interactive via programming (ie if this happens, do this)

Source

Websites without CSS

HTML can be nested

​

• Most HTML tags have an opening and closing, and may have more HTML tags inside of it, called “nesting”
• Don’t forget to close your tags. Only a few HTML elements are “self closing” such as the <img> tag and the <br> tag

Pseudo code from Professor Kelter

The HTML Family Tree

• Because HTML elements can be nested, they create a tree of related elements.
• You might hear this referred to as the “Document Object Model” or “DOM”
• Terms like “parent”, “child”, “sibling”, “ancestor” and “descendent” describe this relationship
• This will become important when we start using CSS to style these elements

​

HTML5 is Semantic

​

• Semantic elements have meaning and help define structure.
• <nav>, <p>, <footer>, etc hold meaning on their own
• A <div> (division) or a <span> are common elements that do not hold meaning on their own
• For SEO and accessibility, semantic elements are helpful to use.

​

HTML5 is Semantic

​

You could replace With

​

​

​

​

​

and it would still be “valid” but less helpful for developers and computers alike

Let’s dive into some common elements…

​

Take notes directly in your code like this!

<!-- my notes -->

Core HTML elements and notes

All HTML elements and examples from Mozilla

Some HTML has “default” CSS styles

• See that list here - https://www.w3schools.com/cssref/css_default_values.php
• Some developers choose to reset all of these values so that they don’t get in the way of their styles.
• You can also overwrite them individually

File Paths

​

• If I was writing code in index.html and I wanted to link to class1.html, the link would be

<a href=”classes/class1.html”>Class 1</a>

• If I was writing in Class1.html and wanted to link to index.html, it would be…

<a href=”../index.html”>Home</a>

The “../” means go up a level

• If I was in class1.html and wanted to show the tcnj logo image, it would be…

<img src=”../assets/imgs/tcnj-logo.png”>

H1, h2, h3, h4, h5, h6

• Six levels of section headings
• They should never go out of order, eg you should never jump from <h1> to <h3> for styling purposes. This is bad for accessibility.
• New sections can “reset” the heading order
• There should only be one h1 per page, representing the visible title of the page
• You don’t have to use all of them, but six are available
• Don’t use headings for styling purposes outside of the element’s meaning

Buttons vs Links

​

• Buttons <button>Click here</button> -> Perform an action on the page
• Links <a href=”url”>Click here</a> -> Go to a new page or link to a different park of the page

Git and GitHub

​

• Git is an open-source version control software
• Version control is the practice of tracking changes to code so that developers can work together on the same code and previous versions can be accessed if necessary.
• GitHub is a product for managing Git repositories (code sources) online
• We will use GitHub for saving and sharing your code.

​

Git Terms

• Repository or “Repo” → where the code lives
• Commit → When you “save” your code to your repo on your computer
• Commit message → the message that says what you changed
• Push → When you upload your code to a remote (online) repo, like the online GitHub (you have a local repository (Git) that can be connected to an online one (GitHub) and watch for changes)
• Pull → When you download code from the remote repo
• Branch → A separate “folder” or “section” of the main branch meant to make updates without interfering with the main code
• Merge → When you combine your branch with another
• Clone → When you make an exact copy of a repo for collaborating
• Fork → When you make a copy of a repo that you can make your own changes to independent of the original

Making and using a GitHub Repository for your own website’s code

1. Go to your own GitHub page and click “new”

2. Give your repo a name and leave everything else as it is. Hit create repository

3. Click “set up in desktop”

4. Pick the local path on your computer where you want to edit your code from

5. That folder will now exist where you set the file path. Open it in VS Code by dragging the folder to the VS Code App Icon

6. Make a new file called index.html in the folder

6. Make a new file called index.html in the folder. Let’s add the HTML boilerplate code. Type “hello world” in the body.

7. Git has tracked your change!

8. Write a message and commit

9. Push the change to GitHub

Make sure to edit your code in that folder, and make commits frequently! Your code will now be saved and track with Git.

BONUS! Want to put your code on a live url anyone can see? With GitHub it’s easy

1. Go to settings on your GitHub repo…

2. Click pages

3. Select your main branch and hit save

In a few minutes, your website will be live at [your-username].github.io/[your-repo-name]

Every time you push code it will update!

​

Getting our own fork of the class project

1. Find the class project repo here: https://github.com/web1-spring23/TCNJPaws-Example
2. Fork it

4. Uncheck “copy the main branch only” and create fork

5. Go to your new fork on your page, and open it via GitHub desktop

6. Clone it locally (change the file path to where you’d like it to save)

7. When it asks how you’re planning to use the fork, select “for my own purposes”

8. Switch to the branch for today’s class

9. Open the folder in VS Code.

The purpose of all this is so that we can start demos with the same code while keep your own copy of the work.

Coding the beginnings of a website

Really useful VS Code Shortcuts

• Get the boilerplate HTML code automatically - Type ! in a blank HTML file and then press “Enter”
• Wrap an HTML element in another element - Highlight the code you want to wrap. Type CMD+Shift+P. Type “Wrap with Abbreviation”. Type the element you want, no carets. Press enter.
• Fix your formatting automatically - Type alt + shift + f. Your code will be formatted with the correct spacing for readability.
• Multiple Cursors - Hold down alt and click. Your cursor will now duplicate and you can type multiple lines at once.
• See code update live - Go to extensions and search for live preview. Install and then click “show preview” in the top right of the file.

Mark up your wireframe with the HTML elements you’ll use

This week’s assignment

• Mark up your wireframe with the HTML elements you want to use
• Try your hand at coding the HTML of your homepage based on today’s lesson. Next week we will have class time to work out issues.
• Remember that your midterm project (due 3/7/23) will be a style guide, 3 desktop and mobile wireframes, and 3 desktop and mobile designed pages. You should be working on this too.