HTML Basics

Created on December 24, 2018

In this course you are going to learn the basics of HTML. This course contains 10 easy to consume videos which you can complete in under 40 minutes. At the end of this course you will be able to code HTML websites. You can find the course breakdown below:


1. Introduction

In this introduction episode we are going to talk to you about what to expect in this HTML Basics Course.


2. HTML & Editors

In this episode we will discuss the HTML Definition, Text Editors, and the Basic Structure of an HTML Page.

HTML DEFINITION

HTML stands for (Hyper Text Markup Language), and HTML is really nothing more than a text file that a browser reads and displays as a webpage.

Editors

There are many editors that you can use to create your html files. If you are on a PC you can use notepad or if you are on a mac you can use TextEdit. But in this course we are using an awesome editor called Sublime Text. Be sure to checkout Sublime Text.

Sublime Text is a simple editor that can be installed on any operating system. Be sure to download a free copy for your machine at https://www.sublimetext.com.

Basic Structure of an HTML page

Here is the basic structure of any HTML webpage that you will create in the future:

<!DOCTYPE html>
<html>
<head>
	<title>My First Webpage</title>
</head>
<body>

</body>
</html>

3. Tags, Attributes and Elements

In this video you will learn about tags, elements and attributes.

Tags

A tag is defined when you add a less than sign (<), add some text, and then add a greater than sign (>). Make sure to close your tags with another less than and forward slash (</), the tag text, and then another greater than sign (>). Checkout the paragraph tag below:

<p></p>

Elements

An element is essentially the same as a tag; however, if you add some text inside of the tag it becomes an element. Checkout the example below:

<p>I'm a paragraph</p>

Since we added "I'm a paragraph" inside of the paragraph tag it is now referred to as a paragraph element instead of a paragraph tag.

Attributes

An attribute is text inside of your tag that explains how the element should be displayed, as an example we have added an align attribute to the paragraph tag below, which will center align the paragraph:

<p align="center">I'm a paragraph</p>

4. Headings & Paragraphs

In this video we'll cover HTML headings and paragraphs. Checkout each section below:

Headings

Headings are typically used for large text headings on a webpage. The content of your headings are also very important when it comes to ranking higher with Google/SEO. To create a Heading 1 tag you would add the following to your HTML page:

<h1>I'm a heading tag!</h1>

There are 6 basic types of heading tags which include h1 through h6 and they look like the following:

<h1>I'm a heading 1 tag</h1>
<h2>I'm a heading 2 tag</h2>
<h3>I'm a heading 3 tag</h3>
<h4>I'm a heading 4 tag</h4>
<h5>I'm a heading 5 tag</h5>
<h6>I'm a heading 6 tag</h6>

Paragraphs

Next we covered paragraphs which are very simple and typically look like the following:

<p>I'm a paragraph</p>

Paragraphs are usually the default text on most web pages. In fact this text that you are reading right now is a paragraph tag.


5. Lists

In this video we will teach you how to create lists in HTML. There are 2 types of lists that you can create which include Unordered Lists and Ordered Lists.

Unordered Lists

<ul>
    <li>Coffee</li>
    <li>Milk</li>
    <li>Tea</li>
</ul>

Ordered Lists

<ol>
    <li>Coffee</li>
    <li>Milk</li>
    <li>Tea</li>
</ol>

6. Links

A link or hyperlink is text or an image that you can click on to navigate to another page. To create a link on a page you can use the <a> tag. Take a look at the example below:

<a href="http://google.com">Click Here to Visit Google</a>

Additionally if you would like the link to open in a new tab you could use the target="_blank" attribute like so:

<a href="http://google.com" target="_blank">Click Here to Visit Google</a>

7. Images

In this video we'll teach you how to use images in your css. To use an image you will use the img tag and add the path to an image file in the src attribute. Take a look at the example below:

<img src="/path-to-image.png">

8. Tables, Divs & Floats

In this video we'll teach you how to layout elements on your page by using Tables, Divs, and Floats.

Tables

Tables are used to store data in columns and rows. Tables are created using the <table> tag. Inside of the table tags are table rows <tr> and the table data (column) <td>. Take a look at an example table below:

<table>
	<tr>
		<td>John</td>
		<td>Doe</td>
		<td>26 years old</td>
	<tr>
	<tr>
		<td>Bob</td>
		<td>Jones</td>
		<td>32 years old</td>
	<tr>
</table>

Divs

An HTML div element is a container that can be used to group and contain any amount of elements. You can wrap any html elements inside of a div element. Common cases for the div element include adding specific styles to each of the child elements contained in the div block. Take a look at the div example below:

<div style="background-color:black; color:white; padding:20px;">

	<h2>Hello DIV element</h2>
	<p>div elements are easy to use and can come in handy when you want to use a container to contain other HTML elements on your page.</p>

</div>

Floats

The CSS float property allows elements on a page to be positioned to the left or the right of the page. This will be covered more in the CSS Basics course; however, in this video we will give you a brief introduction to the float property. Take a look at the example below:

<div style="padding:10px; color:#fff; background:#000; float:left">Float Left</div>

<div style="padding:10px; color:#fff; background:#000; float:right">Float Right</div>
In the above example since we specified float:left for the first div element it is going to float to the left and the second div will float to the right since we added the float:right style.

9. Forms

HTML forms are used to capture user input and submit the data to a website. There are many types of form inputs including text, checkbox, radio, submit, textarea, and select dropdown. Checkout each of these elements below:

  • Form
  • Text
  • Checkbox
  • Radio
  • Textarea
  • Select
  • Submit

Form

Defining a form with the <form> tag creates a new form element in your page. The form element can have a couple attributes including action which is the URL you want the form to submit to and method which defines the method about how you want to submit the form (Common methods include 'GET' and 'POST') take a look at the example below:

<form action="/url-to-submit" method="GET">
  <!-- Add Input values here -->
</form>

Text

The text input is used to generate a typical text input, like a username or password text input:

<form action="/url-to-submit" method="GET">
  <input type="text" name="first_name">
</form>

Checkbox

A checkbox is used to create a multiple select checkbox option similar to the following:

<form action="/url-to-submit" post="GET">
  <input type="checkbox" name="color" value="blue"> I like the color blue<br>
  <input type="checkbox" name="color" value="red" checked> I like the color red<br>
  <input type="submit" value="Submit">
</form>

Radio

A radio button is similar to a checkbox; however, with a radio checkbox only one value can be selected whereas a checkbox can have multiple boxes selected. Take a look at the following example:

<form action="/url-to-submit" method="GET">
  <input type="radio" name="color" value="blue"> My favorite color is blue<br>
  <input type="radio" name="color" value="red"> My favorite color is red<br>
</form>

Textarea

A textarea defines a large text box for adding multiple lines of data, similar to a comment box. To use a textarea in your form it would look similar to the following:

<form action="/url-to-submit" method="GET">
  <textarea name="large_text_area"></textarea>
</form>

Select

Selects are used to create dropdowns. You can use a select dropdown using the following syntax:

<form action="/url-to-submit" method="GET">
  <select name="color">
    <option value="blue">Blue</option>
    <option value="red">Red</option>
  </select>
</form>

Submit

Lastly is the submit input which creates a button to submit your form to the URL. Take a look at the following example which includes a text input and a submit button:

<form action="/url-to-submit" method="GET">
  <input type="text" name="first_name">
  <input type="submit" value="Submit Form Data">
</form>
Once the submit button is clicked the form will post the form input data to the /url-to-submit URL

10. Wrapping Up

In this last video we'll be wrapping up a few last topics and summarizing everything that we just talked about in the course.

Next, you may want to look at taking the CSS course which will teach you how to stylize your HTML pages.


Congratulations on completing this last video and we'll see you in the next :)

Introduction

10 videos (40 minutes)

Autoplay?

0% completed
Now Playing 1. Introduction
2. HTML & Editors
3. Tags, Attributes and Elements
4. Headings & Paragraphs
5. Lists
6. Links
7. Images
8. Tables, Divs & Floats
9. Forms
10. Wrapping Up

© 2020 DevDojo LLC. All rights reserved.