What is HTML?
HTML is the standard markup language for creating Web pages.
HTML stands for Hyper Text Markup Language
HTML describes the structure of Web pages using markup
HTML elements are the building blocks of HTML pages
HTML elements are represented by tags
HTML tags label pieces of content such as "heading",
"paragraph", "table", and so on
Browsers do not display the HTML tags, but use them to render
the content of the page
A Simple HTML Document
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Example Explained
The <!DOCTYPE html> declaration defines this document to be
HTML5
The <html> element is the root element of an HTML page
The <head> element contains meta information about the
document
The <title> element specifies a title for the document
The <body> element contains the visible page content
The <h1> element defines a large heading
The <p> element defines a paragraph
HTML Tags
HTML tags are element names surrounded by angle brackets:
<tagname> content goes here...</tagname>
HTML tags normally come in pairs like <p> and </p>
The first tag in a pair is the start tag, the second tag is the end
tag
The end tag is written like the start tag, but with a forward
slash inserted before the tag name
Tip: The start tag is also called the opening tag, and the end tag
the closing tag.
Web Browsers
The purpose of a web browser (Chrome, IE, Firefox, Safari) is to read
HTML documents and display them.
The browser does not display the HTML tags, but uses them to
determine how to display the document:
HTML Page Structure
Below is a visualization of an HTML page structure:
Note: Only the content inside the <body> section (the white area
above) is displayed in a browser.
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration represents the document type, and helps browsers to
display web pages correctly.
It must only appear once, at the top of the page (before any HTML tags).
The <!DOCTYPE> declaration is not case sensitive.
The <!DOCTYPE> declaration for HTML is:
<!DOCTYPE html>
HTML Versions
Since the early days of the web, there have been many versions of
HTML:
Version Year
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014
Write HTML Using Notepad or TextEdit
Web pages can be created and modified by using professional HTML
editors.
However, for beginners, a simple text editor like Notepad (Windows)
or TextEdit (Mac) can be used.
Follow the four steps below to create your first web page with Notepad
or TextEdit.
Step 1: Open Notepad (PC)
Windows 8 or later:
Open the Start Screen (the window symbol at the bottom left on your
screen). Type Notepad.
Windows 7 or earlier:
Open Start > Programs > Accessories > Notepad
Step 2: Write Some HTML
Write or copy some HTML into Notepad.
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Step 3: Save the HTML Page
Save the file on your computer. Select File > Save as in the Notepad
menu.
Name the file "index.html" or “index.htm”
Step 4: View the HTML Page in Your Browser
Open the saved HTML file in your favorite browser (double click on the
file, or right-click - and choose "Open with").
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least
important heading:
Example
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
Example
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
HTML Links
HTML links are defined with the <a> tag:
Example
<!DOCTYPE html>
<html>
<body>
<a href="https://www.gmail.com">This is a link</a>
</body>
</html>
The link's destination is specified in the href attribute.
Attributes are used to provide additional information about HTML
elements.
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are provided as
attributes:
<!DOCTYPE html>
<html>
<body>
<img src="mypic.jpg" alt="College Tour" width="104" height="142">
</body>
</html>
HTML Buttons
HTML buttons are defined with the <button> tag:
<!DOCTYPE html>
<html>
<body>
<button>Click me</button>
</body>
</html>
HTML Lists
HTML lists are defined with the <ul> (unordered/bullet list) or
the <ol> (ordered/numbered list) tag, followed by <li> tags (list
items):
<!DOCTYPE html>
<html>
<body>
<h2>An Unordered HTML List</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h2>An Ordered HTML List</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
HTML Style Tag
The <style> tag is used to define style information for an HTML
document.
Inside the <style> element you specify how HTML elements should
render in a browser.
Each HTML document can contain multiple <style> tags.
<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>A heading</h1>
<p>A paragraph.</p>
</body>
</html>
HTML Script Tag
The <script> tag is used to define a client-side script (JavaScript).
The <script> element either contains scripting statements, or it points
to an external script file through the src attribute.
Common uses for JavaScript are image manipulation, form validation,
and dynamic changes of content.
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
</body>
</html>
HTML Attributes
All HTML elements can have attributes
Attributes provide additional information about an element
Attributes are always specified in the start tag
Attributes usually come in name/value pairs
like: name="value"
The href Attribute
<a href="https://www.w3schools.com">This is a link</a>
The src Attribute
HTML images are defined with the <img> tag.
The filename of the image source is specified in the src attribute:
<img src="img_girl.jpg">
The width and height Attributes
Images in HTML have a set of size attributes, which specifies the
width and height of the image:
<img src="img_girl.jpg" width="500" height="600">
The alt Attribute
The alt attribute specifies an alternative text to be used, when an
image cannot be displayed.
The value of the attribute can be read by screen readers. This way,
someone "listening" to the webpage, e.g. a blind person, can "hear"
the element.
<img src="img_girl.jpg" alt="Girl with a jacket">
The style Attribute
The style attribute is used to specify the styling of an element, like
color, font, size etc.
<p style="color:red">I am a paragraph</p>
Defining an HTML Table
An HTML table is defined with the <table> tag.
Each table row is defined with the <tr> tag. A table header is defined
with the <th> tag. By default, table headings are bold and centered. A
table data/cell is defined with the <td> tag.
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Ramanpreet</td>
<td>Kaur</td>
<td>25</td>
</tr>
<tr>
<td>Hardeep</td>
<td>Singh</td>
<td>28</td>
</tr>
</table>
HTML Table - Adding a Border
If you do not specify a border for the table, it will be displayed without
borders.
A border is set using the CSS border property:
table, th, td {
border: 1px solid black;
}
HTML Table - Adding Cell Padding
Cell padding specifies the space between the cell content and its
borders.
If you do not specify a padding, the table cells will be displayed
without padding.
To set the padding, use the CSS padding property:
th, td {
padding: 15px;
}
HTML Table - Left-align Headings
By default, table headings are bold and centered.
To left-align the table headings, use the CSS text-align property:
th {
text-align: left;
}
HTML Table - Cells that Span Many Rows
To make a cell span more than one row, use the rowspan attribute:
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
HTML Table - Cells that Span Many Columns
To make a cell span more than one column, use the colspan attribute:
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
Summary- Table-Tag
Use the HTML <table> element to define a table
Use the HTML <tr> element to define a table row
Use the HTML <td> element to define a table data
Use the HTML <th> element to define a table heading
Use the HTML <caption> element to define a table caption
Use the CSS border property to define a border
Use the CSS border-collapse property to collapse cell borders
Use the CSS padding property to add padding to cells
Use the CSS text-align property to align cell text
Use the CSS border-spacing property to set the spacing between
cells
Use the colspan attribute to make a cell span many columns
Use the rowspan attribute to make a cell span many rows
Use the id attribute to uniquely define one table
HTML List Example
An Unordered List:
Item
Item
Item
Item
An Ordered List:
1. First item
2. Second item
3. Third item
4. Fourth item
Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts with
the <li> tag.
The list items will be marked with bullets (small black circles) by
default:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Unordered HTML List - Choose List Item Marker
The CSS list-style-type property is used to define the style of the list
item marker:
Value Description
disc Sets the list item marker to a bullet (default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked
For Example - Disc
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with
the <li> tag.
The list items will be marked with numbers by default:
Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Ordered HTML List - The Type Attribute
The type attribute of the <ol> tag, defines the type of the list item
marker:
Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers
Nested HTML Lists
List can be nested (lists inside lists):
Example
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
LIST Summary
Use the HTML <ul> element to define an unordered list
Use the CSS list-style-type property to define the list item
marker
Use the HTML <ol> element to define an ordered list
Use the HTML type attribute to define the numbering type
Use the HTML <li> element to define a list item
Use the HTML <dl> element to define a description list
Use the HTML <dt> element to define the description term
Use the HTML <dd> element to describe the term in a description
list
Lists can be nested inside lists
List items can contain other HTML elements
Use the CSS property float:left or display:inline to display a
list horizontally
Traditional newspaper layout
The CSS multi-column layout allows easy definition of multiple
columns of text - just like in newspapers:
CSS Multi-column Properties
Following are the multi-column properties:
column-count
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule
column-span
column-width
CSS Create Multiple Columns
The column-count property specifies the number of columns an
element should be divided into.
The following example will divide the text in the <div> element into 3
columns:
Example
div {
column-count: 3;
}
CSS Specify the Gap Between Columns
The column-gap property specifies the gap between the columns.
The following example specifies a 40 pixels gap between the columns:
Example
div {
column-gap: 40px;
}
CSS Column Rules
The column-rule-style property specifies the style of the rule between
columns:
Example
div {
column-rule-style: solid;
}
The column-rule-width property specifies the width of the rule
between columns:
Example
div {
column-rule-width: 1px;
}
The column-rule-color property specifies the color of the rule between
columns:
Example
div {
column-rule-color: lightblue;
}
The column-rule property is a shorthand property for setting all the
column-rule-* properties above.
The following example sets the width, style, and color of the rule
between columns:
Example
div {
column-rule: 1px solid lightblue;
}
Specify How Many Columns an Element Should Span
The column-span property specifies how many columns an element
should span across.
The following example specifies that the <h2> element should span
across all columns:
Example
h2 {
column-span: all;
}
Specify The Column Width
The column-width property specifies a suggested, optimal width for the
columns.
The following example specifies that the suggested, optimal width for
the columns should be 100px:
Example
div {
column-width: 100px;
}
CSS Multi-columns Properties
The following table lists all the multi-columns properties:
Property Description
column-count Specifies the number of columns an element should be
divided into
column-fill Specifies how to fill columns
column-gap Specifies the gap between the columns
column-rule A shorthand property for setting all the column-rule-*
properties
column-rule-color Specifies the color of the rule between columns
column-rule-style Specifies the style of the rule between columns
column-rule-width Specifies the width of the rule between columns
column-span Specifies how many columns an element should span
across
column-width Specifies a suggested, optimal width for the columns
columns A shorthand property for setting column-width and
column-count
HTML Forms
Example:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Forms</h2>
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called
"/action_page.php".</p>
</body>
</html>
Output:
The <form> Element
The HTML <form> element defines a form that is used to collect user
input:
<form>
.
form elements
.
</form>
An HTML form contains form elements.
Form elements are different types of input elements, like text fields,
checkboxes, radio buttons, submit buttons, and more.
The <input> Element
The <input> element is the most important form element.
The <input> element can be displayed in several ways, depending on
the type attribute.
Here are some examples:
Type Description
<input type="text"> Defines a one-line text input field
<input type="radio"> Defines a radio button (for selecting one of many
choices)
<input Defines a submit button (for submitting the form)
type="submit">
The Submit Button
<input type="submit"> defines a button for submitting the form
data to a form-handler.
The form-handler is typically a server page with a script for
processing input data.
The form-handler is specified in the form's action attribute:
The Action Attribute
The action attribute defines the action to be performed when the
form is submitted.
Normally, the form data is sent to a web page on the server when
the user clicks on the submit button.
In the example above, the form data is sent to a page on the server
called "/action_page.php". This page contains a server-side script
that handles the form data:
<form action="/action_page.php">
URL:
Think of the World Wide Web as a vast collection of electronic files stored on
millions of computers all around the world. Hypertext links these files together. The
addresses used to locate these files are called Web Addresses or Uniform Resource
Locators
URL stands for Uniform Resource Locator, more commonly known as a web
address. The address of every resource or file on the internet has a Uniform Resource
Locator, including an address of a web page, audio stream or other internet resources.
URL’s connect the browser to the webpage. The address that we type in locates
the specific web page that can be viewed anywhere in the world at any time, just by a
simple click on the mouse.
URL’s consists of protocol of the resources, domain name for the resource and
address of the file. The first part of the address is called a protocol identifier and it
indicates what protocol to use, and the second part is called a resource name and it
specifies the IP address or the domain name where the resource is located. The protocol
identifier and the resource name are separated by a colon and two forward slashes
Types of URL ( Absolute and Relative )
An Absolute URL is something that is independent or free from any relationship
from the rest. When you use an absolute URL, you point directly to the file you
give exact location of the file.
eg : “sitename.com/images/welcome.gif” is an absolute url as it specifies that
an image file welcome.gif located in the images directory, under yoursitename
domain.
You should always opt for absolute url when referring to other site.Generally
such url are long and hence are not much preferred by lazy webdeveloper they
like to use relative urls. While changing directory structure you need to rewrite
whole path of the new directory and file which can be cumbersome but as far as
SEO is concerned spiders like to crawl absolute url.
A relative URL points to a file/directory in relation to the present file/directory.
They have short urls as they are referring to root directory/subdirectory.Relative
urls helps webmaster to maintain the site without rewriting the whole path again
and again if they had made any changes in directory.
eg : ../image/welcome.gif is a relative url (The initial two peroids (..) in the url
instruct the server to move up one directory (which is the root directory), then
enter images directory and finally point at welcome.gif file )
Relative urls are to used wisely otherwise an error may occur and the intended
file may not open.Relative URLs are short and does not require to write whole
path so due to its short typein nature they are more popular and are commonly
used by webmasters.
The URL Schemes
HyperText Transfer Protocol (HTTP)
HTTP is the Internet protocol specifically designed for use with the World
Wide Web, and thus will be the most common scheme you are likely to use. Its
syntax is:
http://<host>:<port>/<path>?<searchpart>
File Transfer Protocol (FTP)
FTP is a well-used means for transmitting files over the Internet. While there
are many advantages to using HTTP instead, many systems don't offer full
support of HTTP and clients are not as well developed as they are for FTP.
Thus, many times files are distributed via FTP. Its syntax is:
ftp://<user>:<password>@<host>:<port>/<cwd1>/<cwd2>/.../<cwdN>/<name>;t
ype=<typecode>
Electronic Mail (Mailto)
The Mailto URL scheme is different from the previous three schemes, and it
does not identify a file available over the Internet, but rather the email address
of someone that can be reached via the Internet. The syntax is:
mailto:<account@site>
Usenet News (News)
The News URL scheme allows for the referencing of Usenet newsgroups or
specific articles. The syntax is either of the following:
news:<newsgroup-name>
news:<message-id>
Telnet to Remote Host (Telnet)
The Telnet URL designates an interactive session to a remote host on the
Internet via the Telnet protocol. Its syntax is:
telnet://<user>:<password>@<host>:<port>/
Host-Specific File Names (File)
The File URL scheme indicates a file which can be obtained by the client
machine. In many sources, this scheme is confused with the FTP scheme. FTP
refers to a specific protocol for file transmission, and while the File URL leaves
the retrieval method up to the client, which in some circumstances, might be
via the FTP protocol. When the file is intended to be obtained via FTP, I
recommend designating that URL scheme. The syntax for the File scheme is:
file://<host>/<path>
