Basic HTML elements
It stands for Hyper Text Markup Language and it's what the web is founded on. Created by Tim Berners Lee at Cern in the 90s it is a structured way of writing things so that machines can read them as easily as humans. You've probably seen the syntaxt before and it becomes pretty easy to read if you know what to look for.
Urls are kind of magic. They are the blood of the internet, without links and ways of sharing we would not have a community online. Urls have two basic structures.A url can be absolute: https://facebook.com, or relative: /blog/my-first-blog-post. Absolute URLS are what most people think of when they hear URL, but relative paths make up much of your life without you knowing it. Think of relative URLs like a file path. In Finder, you have your home folder (usually named your name so mine is patrick). Inside that you have a Desktop folder and on your desktop you have a screenshot.png file. The relative URL to that PNG would be patrick/Desktop/screenshot.png
There are a couple of very common pieces of HTML that we'll learn today. A piece of HTML is called a tag. Tags come in a bunch of different flavors but they all have the same basic shape. They look like this.
<html></html>The beginning part is called the opening tag.
<html>It tells the computer where a block starts.
The end part is called aptly the closing tag.
</html>This tells the computer where to stop reading this block.
Some HTML tags are self closing which means they have that slash on the opening tag and don't need a closing tag.
<input type="text" />Common HTML tags are
<a href="<some-url-here>">The words a user will see that they can click on.</a>The a tag expresses links in HTML. It's possibly the oldest and most important part of the internet. The ability to link to anywhere from anywhere in the page is such a simple but mind-bogglingly powerful concept that it took computer scientists 70 years to think up.
<img src="<some-photo-url>" alt="text descirbes the image" />If the internet started as just text and links it soon evolved into a visual landscape, for a long time the img tag was the only way to express that visual nature. It's pretty simple and does exactly what you think. It handles relative and absolute urls as well as long as it resolves to an image file.
<p>lorem ipsum solar domet.</p>The p, like the a tag, is a basic building block that was the text files that were and are HTML. It is a divider and groups similar content.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>These are headlines. They have importance both visually and for SEO. The most important is h1 and the least important is h5.
<div>
<p>Look Ma Some Content</p>
</div>The div tag is a divider and it's everyones favorite element in 2019. It's used to group (and by definition separate) like pieces of content. The divider has no default styling expect to be a block on the page, it's only with CSS, something we'll get into next time, that it really becomes important.
Write your next project brief in HTML. Send me the file for review.