Sup peoples!
Soooo, you’ve decided to learn some HTML (aka HyperText Markup Language), huh. How cool is that. VERY MUCH c00l. What is HTML, you may be wondering. Basically, it’s the structure of a web page. You know those websites that we ever so often go to as we’re on the google. YUP THOOOOSE! I know.. pretty mind blowing and cool. Okay, so, aside from being the literal skeleton of all web pages (woah), HTML is what lets you (the user) see those images, texts, videos, etc. YOU KNOW WHAT’S EVEN FLIPPING COOLER?? Wait, I need a sec to compose myself, I’m not screaming, I’m just excited.
…
Okay, back to what I was saying. You’re about to learn some HTML basics (aka the first step when creating a website). YOU READY??!! Let’s goo:
What you need:
First offff, you’ll need two programs: an editor and a browser.
Here’s a few examples you can use for an editor:
Online website. CodePen is social development environment where you can build and test your code, learn and discover other people’s projects, and more! You can use this as your online editor to start coding! This one already has the editor and the output it will show for the code you put 🙂
Free and open source code editing software! This is the one I use majority of the time and it’s pretty good.
Sublime Text is one of the best editors, in my opinion. However, I think that after a certain period, you’re going to need to pay to continue using this one.
A browser is used for viewing and testing your website, a few examples for a browser: Google (I recommend using this one), Safari, and Firefox.
HTML Element Anatomy:
quick side note: HTML is made of elements. Majority of the time (not all of the time tho!!) an Html Element consists of two tags (one opening and closing tag).
Here’s a lil diagram to show a paragraph element:
mini breakdown of <p> element (psst it’s the image above hehe) anatomy:
- Element name:
This is the name of the element you are using. In our example, we used a <p> element, this would change if you were putting a video, image, header, etc.
- Opening tag:
This would have the name of the element, in the example above its p. The name of the element is wrapped in an opening and closing angle bracket.
- Element Content:
This is the content of your element. In our example, it’s the text saying: ur cool (which you are very much so btw).
- Closing tag:
Although not all elements have a closing tag (such as an image element), in the case of the <p> element there is one. It’s almost exactly like the opening tag EXCEPT it has a forward slash before the element name.
HTML Document Basics To do (to do, to do, to do, to do, to doooo):
To tell the browser that the document you are uploading is a HTML document, start the first line with: <!DOCTYPE html>
To start and end the html document, you wrap all the content with the <html> element.
Inside the <html> document, there are two sections: head section and body section.
About the head section: uses the <head> element. Inside this section, put <meta charset=”utf-8“>, this element indicates and sets the character of your document. Aside from the <title> element which sets the title of your page, another thing I want to mention is that the information put in the head section does not appear to your page’s viewers.
About the body section: uses the <body> element. This part of the html document has all the content you want to show to your website user.
Headings:
There are six different headings. These headings have a lot of different purposes such as for articles, descriptions, titling, and more. Ordered from largest to smallest in size, here are the list of heading elements:
-
h1
\\ Code:
<h1> This is what the header looks like using h1 </h1>
\\ Output:
This is what the header looks like using h1
-
h2
\\ Code:
<h2> This is what the header looks like using h2 </h2>
\\ Output:
This is what the header looks like using h2
-
h3
\\ Code:
<h3> This is what the header looks like using h3 </h3>
\\ Output:
This is what the header looks like using h3
-
h4
\\ Code:
<h4> This what the header looks like using </h4>
\\ Output:
This is what the header looks like using h4
-
h5
\\ Code:
<h5> This is what the header looks like using h5 </h5>
\\ Output:
This is what the header looks like using h5
-
h6
\\ Code:
<h6> This is what the header looks like using h6 </h6>
\\ Output:
This is what the header looks like using h6
Paragraphs:
This element is defined with the <p> tags. This is a paragraph.
\\ Code:
<p> hallo u amazing human </p>
\\ Output:
hallo u amazing human
Divs:
A div (aka division, element, or a container) is the most usable tag in web development and it is used to separate out data in the web page and group elements in your HTML together which can later be styled with CSS. A div can contain any HTML elements, such as links, texts, images, or videos. A div is usually given a unique id to distinguish it from other div elements.
Attributes:
Attributes are used for putting more information for an item and expanding an element’s tag. Attributes are added to the opening tag of an element and include a name and a value. There should be a space between the attribute and element. The attribute name should be followed by an ‘=’ sign. The attribute value should be wrapped by an opening and closing quotation mark.
Lists:
There are ordered lists and unordered lists. Unordered lists are lists where the order of the list doesn’t matter, these types of lists are wrapped in a <ul> element. On the other hand, an ordered list have an order that matters and is wrapped in a <ol> element. After declaring what type of list you want, each item inside the list is wrapped in a <li> (aka list item) element.
unordered list
\\ Code:
\\ Output:
ordered list
\\ Code:
\\ Output:
Image:
IMAGES!! To add an image to a web page you will be using the <img> element. HOWEVER this element is lil bit different because it doesn’t have a separate closing tag. It actually has a self-closing tag. I’ll show what this means in the example below. An <img> element contains these attributes:
- src
The src should be set to the image’s source, URL, location, or file name.
- alt (aka alternative text)
This is a description for the image. If the photo is not loading properly or the user of your website is visually impaired the alt attribute is a descriptive text that will help in those cases. It also helps with SEO (aka Search Engine Optimization).
Video:
Aside from images, you can also add videos using HTML! To add a video you will need to use the <video> element. There is a closing and opening tag. The attributes for a video are these: src, width, height, and controls (allows for basic video controls like pause, play, and skip).
tip: indentation is great for organization and you should really use it in your code!
Okie dokie 🙂 that’s going to be allll for now peeps! Hope that you found this useful and fun hehe. Now, go make a file on your editor, write some code, experiment, save the file (making it end it .html), and test it out on a browser!
Yours truly,
L.O.A.S.H
© Elizabeth Anne Villoria
Life of a Secret Homeschooler | A.K.A | L.O.A.S.H 
You must be logged in to post a comment.