Programming languages are necessary for functionality and interactivity in websites, applications and tangible electronics
Markup languages
Markup languages provide form & structure to information
Markup is useful for transferring data quickly across vast physical distances
Markup languages [can] display data
✨ Lesson Time ✨
HTML is made up of tags. These tags render various elements such as text, images and interactive controls.
The anatomy of an HTML tag is simple. Each tag starts with a left-angle-brace < and ends with a right-angle-brace >, with the name of the tag between those two braces:
<title>This code sets the title of a website</title>
You may have noticed above that we have an opening tag<title> and a closing tag</title>. The only difference between the opening and closing tags is that the closing tag has a forward-slash / before the tag name.
*Every tag that contains another element must have both an opening-tag and a closing-tag.
We can make a website simply by creating a file and naming it literally anything as long as we put .html as the extension. Any file with a .html extension can be opened and viewed in a web browser, such as Google Chrome or Safari (I prefer Google Chrome when I am writing code).
I created a file called lesson-1.html
Once we have created our html file, we always have to start out the same way: write the opening and closing html tags
<html> </html>
This lets the web browser know that everything between those tags is part of the website's code.
HTML websites have their own anatomy. Each has a head and a body. The head tag contains all the information that is important for the browser to know while being extraneous to the website's users, while the body contains all the information that is supposed to be shown to users. As you have probably guessed, those tags look like this: <head></head><body></body>
After adding the head and body tags, our code should look like this:
<html>
<head>
</head>
<body>
</body>
</html>
Let's add a title that will show up in the browser tab when someone is visiting our website. We do that by adding a <title> tag to the head:
<html>
<head>
<title>Lesson 1 Example Website</title>
</head>
<body>
</body>
</html>
Now, let's display some information on our website! We can start with a simple heading that welcomes our website visitors.
HTML has 6 different sizes of headings. Each has its own numbered tag in which the smaller the number, the higher priority that heading is (aka smaller number = bigger heading). The heading tags are as follow: h1, h2, h3, h4, h5 and h6:
Heading 1
<h1>Your text here</h1>
Heading 2
<h2>Your text here</h2>
Heading 3
<h3>Your text here</h3>
Heading 4
<h4>Your text here</h4>
Heading 5
<h5>Your text here</h5>
Heading 6
<h6>Your text here</h6>
For now, I am going to go with the largest option, h1:
<html>
<head>
<title>Lesson 1 Example Website</title>
</head>
<body>
<h1>Welcome to this ugly af website</h1>
</body>
</html>
Let's add just two more pieces of content to our website before we view the final result. I think an image and a short paragraph would be a good start!
The paragraph tag in HTML is very simple: <p>Your text here</p>
The image tag is a little bit more complicated. Image tags are one of the tags that does not require a closing tag, which means that we have to put the image's information (aka the link to the image) directly in the tag. This is how an image tag works:
<img src="the_link_to_your_image">
Let's find an image on Google Images. I found this one that looked pretty cool:
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
✨ Let's try it ✨
It's time to put everything you have learned to the test! I built an interactive code editor where you can write HTML tags to make sure you've got the hang of it.
Let's do the same thing, only this time we will use paragraph tags and write text inside of them:
For our final exercise, let's style some of the text in the paragraph tag below. Place the opening and closing bold tag<b>...</b> around any of the words or letters.
