How to become a Programmer for Complete Noobs! Part 4

keep0nl3arning (39)in #tutorial • 7 years ago (edited)

How to become a Programmer for Complete Noobs! Part 4

Hi Steemians!

In today's lesson, we're gonna continue to build and improve our website in HTML, now using photos and links! We're gonna take the basic stuff you just built, in part 2 and 3, and make it fancier and funner! (And funner is not even a word!)

Introduction-- Uhh, why even learn HTML?

You'll be the most interesting man/woman in the world!
With HTML, you can make a website, which you can use to make money!
- If you love HTML and web design enough, you could just quit your current job and only build websites, and work solo as an entrepreneur!
- A whole lotta people who build websites who don't even code that work in UX, which stands for user experience. These people make a lot of money to design apps that are user-friendly. Knowing HTML will definitely help in a UX career
HTML is easy to learn. 'Nuff said
HTML will get you closer to being a hacker. ;) To be a hacker, you need to understand the web. The web is heavily built on HTML elements.

Now let's awesome-fy our previous HTML webpage that we built in part 3!

Step 1- Open your code editor (Brackets)

Open up your code editor, and get your code ready!

Below is the code we worked on last time. Type it out, OR copy and paste it (but remember you will learn more by typing!):

<!DOCTYPE html>
<html>
<head>
<title>Page Title, shows up at top of tab</title>
</head>
<body>

<h1>This is a Heading, it will be big and bold!</h1>
<p>This is a paragraph, my text here will be smaller</p>

</body>
</html>

Step 2: Actually understand the code from last time (shown above)

Time for a brief overview of html!

Every HTML program should have these 5 things!:

"!DOCTYPE html" tag
"html" tag
"head" tag
"title" tag
"body" tag

As you may have noticed, these things are called tags.

There are open and close tags. Open tags have a "< >" and close tags have a "< / >". If this seems confusing, don't worry about it! You will soon be a HTML pro :D

1. !DOCTYPE tag

<!DOCTYPE html>

The !DOCTYPE tag tells the web browser what kind of page this is. To write good HTML code, you should ALWAYS put your !DOCTYPE tag on the top of your HTML page.

2. html tag

<html>
Hi, I'm inside the "html" tag! 
ALL of my HTML code, including the "head", "title", and "body" should 
be inside here.
 In fact, EVERYTHING should be inside here, except the "<!DOCTYPE html>"
</html>

As you can read inside the tag, EVERYTHING goes inside of the html tag. Pay close attention to the "opening" and "closing" tags.

Do you see the difference between:

<html>

And:

</html>

(Hint hint! One has a \ and the other one doesn't. The one with the \ ALWAYS closes the tag!)

3. head tag

<head>
Hi, I'm inside the "head" (or header) tag!
This contains all my important stuff 
like my "title" and "CSS" and other things!
</head>

The head contains important stuff like your title, as you can read above!

4. title tag

<title>I'm inside the "title" tag!
Everything in here shows up on my tab in Chrome or Firefox. 
Keep in mind that my title tag should go inside the "head" tag!
</title>

5. body tag

<body>Hi, I'm inside a "body" tag. 
The "body" of my text goes inside here! 
Like paragraphs, etc. 
</body>

Step 3: Create a cool Meme on memedad to add to our Website !

So last time, we made this website, with the code above:

BORING!

Let's spice things up with a Meme! :D

Step 3.1 Go to memedad.com and create a Meme

Here's the link to memedad to create your Meme: http://memedad.com/

Select a meme, then make a caption. DO NOT MAKE AN ACCOUNT, unless you want to, for some reason. Simply right click and save the image.

Make sure to save to the same place your html code is in and remember your name you saved it as!!

Here's the meme I created:

So funny, right? xD

Step 4: Move our image to same folder/directory as our html file

Did you do this already? If not, do it now!

Step 5: Make an "image" tag to add to our code!

An image tag looks like this:

My image "src" is just the name of my meme image file. That's my meme png right there.

Formally, there are 4 components to an image tag:

"<img":
- this is the opening tag
"src='myimagename.png'"
- "src" means "image source"
- Our image file name goes in here
"alt='this is text if this crashes'"
- "alt" means "alternate image"
- This is optional, but if our image can't be found, this text is displayed
">"
- this closes the image tag

(NOTE: All these little rules, like the ones above, in programming are called syntax. Syntax can be nice, or really annoying. HTML is really fun, but I personally think the "syntax" in HTML is kinda weird)

If this explanation and rules made no sense above, don't worry about it! This will make sense later!

Step 6: Insert our image tag into our HTML code and show off!

Here's how my code looks below in the Brackets code editor, after adding our image tag:

Here's the code again, if you wanna copy-paste it:

<!DOCTYPE html>
<html>
<head>
<title>Page Title, shows up at top of tab</title>
</head>
<body>

<h1>This is a Heading, it will be big and bold!</h1>
<p>This is a paragraph, my text here will be smaller</p>