Introduction to HTML
HTML stands for HyperText Markup Language. It is a markup
language that is the most basic building block of the Web. It
helps browsers understand the structure and style of a
website. HTML consists of a series of elements such as
<img> to show images, and
<p> to show paragraphs. You will learn all
about these elements as you go along this course.
HTML is usually assisted by other technologies to define it's elements visual appearance (CSS) and functionality (Javascript)
HTML Elements
"Tags," which consist of the element name enclosed by "<" and
">", are used to distinguish HTML elements from other content
in a page. Case is not relevant when naming an element inside a
tag. In other words, it can be written in uppercase, lowercase,
or a combination of the two. <title> tag, for
instance, can be expressed in a variety of ways, such as
<Title> or <TITLE>. Tags
however, should be written in lowercase, as is customary and
advised.
HTML uses "markup" to annotate text, images, and other content
for display in a Web browser. HTML markup includes special
"elements" such as
<head>, <title>, <body>, <header>,
<footer>, <article>, <section>, <p>,
<div>, <span>, <img>, <aside>,
<audio>, <canvas>, <datalist>,
<details>, <embed>, <nav>, <output>,
<progress>, <video>, <ul>, <ol>,
<li>
and many others.
Basic Stucture
Now let us create your very first html file. Open a notepad if you are using Windows, or TextEdit if using Mac, then copy the code from the image above.
These tags should be placed underneath each other at the top of every HTML page that you create:
-
<!DOCTYPE html>— declaration defines that this document is an HTML5 document -
<html>— element is the root element of an HTML page -
<head>— element contains meta information about the HTML page -
<body>element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
Other commonly used tags:
-
<title>— element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab) -
<h1>— element defines a large heading <p>— element defines a paragraph
For a complete list of all HTML tags, check out this HTML element cheatsheet
Remember most elements have opening and closing tags. <h1> (which means heading 1) for example should be closed with </h1> and put the text in between these tags.
Once you are done copying the code, save your file as "My first website.html" then open it on your favorite web browser. Congrats!
HTML Editors
Web pages can be created and modified by using a simple text editor like Notepad for Windows and TextEdit for Mac.
However, there are softwares called Integrated Development Environment (IDE), that combines features and tools needed by developers.
Some popular examples are:
- Visual Studio Code
- Sublime Text
- Atom
- Notepad++
Elements
Now that you know how to make the basic structure of a webpage, and have the tools to edit it, let's start adding content to your web page!
Take a look at these commonly used tags we'll be using in the next lessons.
| Tag | Description |
|---|---|
| <a> | Defines a hyperlink |
| <b> | Defines bold text |
| <br> | Defines a single line break |
| <button> | Defines a clickable button |
| <div> | Defines a section in a document |
| <em> | Defines emphasized text |
| <form> | Defines an HTML form for user input |
| <h1>-<h6> | Defines HTML headings |
| <img> | Defines an image |
| <input> | Defines an input control |
| <ol> | Defines an ordered list |
| <option> | Defines an option in a drop-down list |
| <p> | Defines a paragraph |
| <table> | Defines a table |
| <td> | Defines a cell in a table |
| <tr> | Defines a row in a table |
| <ul> | Defines an unordered list |
Attributes
Attributes contain extra information about the element that won't appear in the content.
- All HTML elements can have attributes
- Attributes provide additional information about elements
- Attributes are always specified in the start tag
- Attributes usually come in name/value pairs like: name="value"