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>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>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 :)
Comments (0)