HTML: Hyper Text Markup Language
Slide 2: Markup vs. Programming
Programming, as we’ve learned, is about giving the computer a set of instructions. We have seen several programming languages, most notably Scratch and Python.
Markup is more about designing something. Currently, most markup languages are used for website design. The cornerstone of website design is HTML, CSS, and JS.
Other types of markup language include LaTeX (my favorite), XML, and SVG.
Slide 3: Starting an HTML Project
There are two programs you need for an HTML project: a text editor and a browser.
The text editor you’ll be using is called “gedit” (or text editor, gedit is better though)
Any browser on your computer will do.
Slide 4: gedit
The first thing we’re going to do after opening Gedit is to save our new file. Save it as webpage.html
If you don’t have the .html extension at the end of your filename, it won’t work.
Save it in your handin folder
Slide 5: Your first page
<!DOCTYPE html>
<html>
<head>
<title>This is a title</title>
</head>
<body>
<p>Hello world</p>
</body>
</html>
The whitespace in HTML doesn’t actually matter like it does in Python, but it helps you read it better. I used spaces instead of tabs.
Slide 6: Viewing your progress
You can see your progress at anytime by using the browser. If you make changes to your webpage, then you need save and hit the refresh button to see them.
/home/your_name/handin/webpage.html
Slide 7: Tags
There are different types of tags for different parts of the webpage.
<html> Everything goes between these 2 tags. They should be vertical </html>
<head> This text goes in the title bar of the web browser </head>
<body> All of you web page text goes here. These should also be vertical </body>
<h1> This is a heading (the numbers go to 6) </h1>
<p> This is a paragraph </p>
Slide 8: Headings
<!DOCTYPE html>
<html>
<head>
<title>This is a title</title>
</head>
<body>
<h1> This is the biggest header</h1>
<h2> This is slightly smaller </h2>
<p>This is a paragraph</p>
</body>
</html>
Slide 10: You Try
Make a web page!
Write about your favorite food.
Use at least 2 headings and 2 paragraphs.