📝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 .

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:

My first paragraph.

📌 Getting Started

For this activity you’ll need:

Sublime Text or another code editor.

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.

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

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.

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.

User-uploaded image: Screen+Shot+2020-09-09+at+12.18.30+AM.png

“nika_art20” is the first folder you created.

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>

Hello World!

​​‍​👉​What is HTML?

​​HTML = HyperText markup language

​​​📌​ Getting Started

​​Let’s start with getting our files set up.

‍👉What is HTML?

HTML = HyperText markup language

📌 Getting Started

Let’s start with getting our files set up.