📝Penn Week 1 Notes – HTML Intro 

‍👉What is HTML?

HTML
CSS
Javascript
Architect (Structure)
Interior Designer (Style)
Plumber (Behavior)
What it says
What it looks like
What it does

HTML = HyperText markup language

“A markup language is a system for annotating a document in a way that is syntactically distinguishable from the text.”

HTML is not a programming language; it is a a markup language that provides the means to create content and structure from text. These documents are created from a series of semantics blocks (HTML tags). When crafting HTML pages, always keep in mind the semantics of the tag to best reflect the intent of the text. For example, a list of items makes more sense as an unordered list of list items <ul><li> than as a series of paragraph tags <p>.

HTML is essentially the blueprint behind all websites.

An HTML element usually consists of a start tag and end tag, with the content inserted in between:

<tagname>Content goes here...</tagname>

The HTML element is everything from the start tag to the end tag:

<p>My first paragraph.</p>

📌 Getting Started


For this activity you’ll need:
  • Chrome (We will use Chrome as our web browser for this class. Not safari)
  • Remember to use lowercase and no spaces in your filenames.

Let’s start with getting our files set up.

  1. Create a folder for this class, I’d suggest a naming structure like: “yourname_arts22” but replacing yourname with your name. Example: “nika_arts22”
  1. Create another folder called “projects” within the “yourname_arts22” folder.

This is where you will save all your web files for our class. This folder will eventually get uploaded to GitHub, which will publish your work and make it accessible to anyone with an internet connection. For this reason, you do not want to save your design and working files to this folder – you should only include .html .css .js or images/videos/audio in here. You should definitely save all your working files, though, and I’d encourage you to set up a similar structure somewhere else on the computer, and save this folder for what will go online.

  1. Now open up a blank file in Sublime text. Save it inside of the “yourname_arts22” folder and title it index.html this is the index of your projects directory. It will eventually become your class site that links to all of your projects. Every project in this class will have its own directory and its own index.html file.



  1. Begin typing “<html” and hit tab in Sublime Text. It should populate your document automatically with the necessary assets your HTML file needs. You’ll notice that there are several tags in the document. Take a look at the below and paste it into your index file and hit save.

Your file should look like this:
<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Nikas Page</title>
</head>
<body>
    <p>Hello World!</p>