📝 Penn Week 3a Notes – HTML Review, Embedded Content, CSS
❄️❄️❄️❄️ Happy snow day! ❄️❄️❄️

HTML Review

Architect (Structure)
Interior Designer (Style)
Plumber (Behavior)
What it says
What it looks like
What it does
Getting Started
Within your main directory (nika_arts21 )set up a new folder called “exercises” and create another one titled “interview” within it. Please create an index.html file that lives insides of it.

Remember, once you save your file as index.html you can hit tab and the HTML starter template will appear.
This will be the folder for an upcoming exercise you’ll turn in next Wednesday, but we’re getting started on it today.

Embedded Content

Embedded content is any image, video, social media posts, Spotify playlists, website that has been placed on a website from an external source. You might use embedded content to highlight something from its original source.

For example: if you put a YouTube video onto a webpage, you would use their embedded code.

Many of these platforms make it easy to do this by offering a code snippet that you can cut and paste and place onto your site.

You can just copy and paste this into your HTML document and you’ll have the default styling of that embedded content.

<!DOCTYPE html>
<iframe src="https://open.spotify.com/embed/track/3jDdpx9PMlfMBS5tOBHFm9" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>

You’ll also notice that the code snippet uses an iframe. An iframe is basically embedding another webpage into your current webpage. You can also embed entire external webpages rather than the Spotify song, for example I’ll embed our class site right after the song:

<iframe src="http://arts21.labud.nyc/"></iframe>

Some websites will not work, for example google.com will not work because of security reasons.

Introducing CSS

CSS stands for Cascading Style Sheets. CSS is used to give style and change the appearance of your structured HTML. CSS can be added to HTML in 3 ways:

  1. Inline - by using the style attribute in HTML elements
  1. Internal - by using a <style> element in the <head> section
  1. External - by using an external CSS file.

It’s best practice to store your styles in an external stylesheet, linked to from your HTML document’s head. For the purpose of this class, all your styles will be stored using the external method.

️ You link to your CSS in the head of your document like this

<link rel="stylesheet" href="PATH TO YOUR CSS FILE">