HTML - Week 07
Welcome to week 7 of Intro to Creative Web Dev!
Now you’ve seen the fundamentals of coding in p5.js. This week you’ll be learning a new language called HTML, and using that to build a webpage!
Work through the activities in this page to complete the week.
From p5.js to HTML
To help you transition from p5.js to HTML, first read through this tutorial:
HTML
After you have your Replit editor set up with a new HTML project, read through this tutorial:
Project
Now you know how to make a webpage by writing HTML in the Replit editor.
To practice that, create a webpage using at least ten HTML tags.
Use resources like W3Schools and Mozilla Developer Network to learn about HTML tags. And don’t be afraid to search for new tags!
For example:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Hello World</h1>
<p>Welcome to my first webpage!</p>
</body>
</html>
This code contains 7 HTML tags: DOCTYPE (technically this isn’t an HTML tag but I’m counting it anyway), html, head, title, body, h1, and p.
Try creating a webpage that introduces yourself using at least ten HTML tags. What are your hobbies, favorite movies or songs, or favorite places to eat?
Styling Content
This week is all about setting up your environment and learning HTML, which tells your browser what types of content to display. Your browser has some default rules about how to style different types of content. For example, headings are large and bold, and links are blue and underlined.
If you want to customize the styles of your content, like changing colors or layout, you’ll need to go beyond HTML and use CSS.
For now, focus on HTML without worrying too much about styling. You’ll learn about CSS next week!