BASICS
PYTHONISTA PLANET
1
HTML is a language used for creating web pages. HTML stands
for Hyper Text Markup Language. A markup language uses
tags to identify content.
The structure of an HTML document is like that of a sandwich,
containing opening and closing tags, and everything in
between them.
<html> Tag
The whole program is surrounded by the tags <html> (opening
tag) and </html> (closing tag). Everything must be written
inside these tags.
<head> Tag
The head of an HTML file contains all the non-visual elements
that help to make the page work
<body> Tag
The head tag is followed by the body tag. All visual-structural
elements, such as headings, paragraphs, lists, images, links,
etc., are contained within the body tag.
2
Basic Structure of an HTML file
<html>
<head>
..........................................
</head>
<body>
..........................................
</body>
</html>
HTML files are text files. Hence, you can use any text editor to
create your web page. HTML files should have the extension
.html
<title> Tag
This tag is used for adding a title on the tab describing the
web page. It should be placed in the head section.
The title element is important since it describes the page and
is used by search engines.
<p> Tag
We use the <p> tag to create a paragraph of text.
3
eg: <p> This is a paragraph </p>
<br> Tag
We use the <br> tag (also called the single line break) to add
a single line of space. <br> is an empty HTML element.
It has no end tag.
Text Formatting
There are several tags for different types of text formatting.
The most important ones are given below:
<b> bold text </b>
<big> big text </big>
<i> italic text <i/>
<small> small text </small>
<strong> strong text </strong>
<sub> sub-scripted text </sub>
<sup> super-scripted text </sup>
<ins> inserted text </ins>
<del> deleted text </del>
<em> emphasized text </em>
Browsers display <strong> as <b> and <em> as <i>.
However, the meanings of these tags differ. <b> and <i>
define bold and italic respectively whereas <strong> and
<em> indicate that the text is important.
4
HTML Headings
HTML includes six levels of headings, which are ranked
according to importance. These are <h1>, <h2>, <h3>, <h4>,
<h5>, and <h6>.
Search engines use headings to index the web page structure
and content. Hence, it is not recommended that you use
headings just to make the text big or bold.
<hr/> Tag
To create a horizontal line, use <hr/> tag.
Comments
Comments are written inside <!-- and -->for
documentation. Comments are not displayed in the browser.
eg: <!-- This is a comment -->
HTML Elements
HTML documents are made up of HTML elements. An HTML
element is written using an opening tag and a closing tag,
and with the content in between. HTML documents consist of
nested HTML elements.
5
Attributes
Attributes provide additional information about an element
or a tag, while also modifying them. Most attributes have a
value (the value modifies the attribute). Attributes are
always specified in the opening tag.
eg: <p align = "center" >
This text is aligned to the center </p>
<hr width = "50%" align = "left" />
Note: The measurement units used for height and width
attributes are % and pixel(px).
<img> Tag
The <img> tag is used to insert an image. It contains only
attributes and doesn't have a closing tag. The URL of the
image can be defined using the src attribute.
eg: <img src = "image.jpg" />
In case the image cannot be displayed, the alt attribute
specifies an alternate text that describes the image in words.
eg: <img src = "photo.com/tree" alt = "tree"/>
Images can be resized using width and height attributes.
6
By default, an image has no borders. Use the border
attribute within the image tag to create a border around the
image.
eg: <img src="photos.com/tree" height="150px"
width="150px" border="1px" alt+"tree" />
<a> Tag
In HTML, links are defined using the <a> tag. Use the href
attribute to define the destination address of the link.
eg: <a href="https://github.com/ashwinjoy"> Ashwin Joy
</a>
Clicking on Ashwin Joy will redirect you to his GitHub
account.
The target attribute specifies where to open the linked
document. Giving a '_blank' value to your attribute will open
the link in a new tab.
eg: <a href = "https://github.com/ashwinjoy" target =
"_blank"> Ashwin Joy </a>
Lists
An ordered list starts with the <ol> tag and each list item is
defined by <li> tag. The list will be automatically marked
with ordered numbers.
7
An unordered list starts with the <ul> tag. The list items will
be marked with bullets.
eg. of ordered list:
<ol>
<li> Red </li>
<li> Blue </li>
<li> Green </li>
</ol>
Output:
1. Red
2. Blue
3. Green
eg. of unordered list:
<ul>
<li> Red </li>
<li> Blue </li>
<li> Green </li>
</ul>
Output:
Red
Blue
Green
8
Tables
Tables are defined using the <table> tag. They are divided
into table rows using the <tr> tag. Table rows are further
divided into table data(columns) using the <td> tag.
The <th> tag can be used to define table headings.
eg:
<table>
<tr>
<th> Name </th>
<th> Age </th>
</tr>
<tr>
<td> Ashwin </td>
<td> 23 </td>
</tr>
<tr>
<td> Ashish </td>
<td> 17 </td>
</tr>
</table>
Output:
9
A border can be added using the border attribute.
eg: < table border = "2" >
A table can span (merge) two or more columns using colspan
attribute. To make a cell span more than one row, use the
rowspan attribute.
eg:
<table>
<tr>
<td> Red </td>
<td> Blue</td>
<td> Green </td>
</tr>
<tr>
<td> Yellow </td>
<td colspan="2"> Orange </td>
</tr>
</table>
Output:
To change the position of a table, use the align attribute. To
specify a background color to table cells, use the bgcolor
attribute. The cellspacing and cellpadding attributes can be
used to manage the cells.
10
Block vs Inline Elements
Block level elements start from a new line.
eg: <h1>, <li>, <ol>, <ul>, <table>, <div>, etc.
Inline elements are normally displayed without line breaks.
eg: <a>, <img>, <span>, etc.
<div> Tag & <span> Tag
The <div> (block level) and <span> (inline level) are elements
that are often used as containers for other HTML elements.
These elements can be very useful to style a particular
section of content when they are used together with some
CSS styling.
Forms
HTML forms are used to collect information from the user.
Forms are defined using the <form> element, with its
opening and closing tags.
eg:
<form>
Name: <input type="text"> <br>
Email: <input type="text"> <br>
<button> Submit </button>
</form>
11
Use the action attribute to point to a web page that
will load after the user submits the form.
eg: <form action = "https://pythonistaplanet.com">
</form>
The method attribute specifies the HTTP method
(GET or POST) to be used when forms are submitted.
When you use GET, the form data will be visible in
the page address.
Use POST if the form is updating data, or includes
sensitive information (like passwords). POST offers
better security because the submitted data is not
visible in the page address.
eg: <form action="https://pythonistaplanet.com"
method = "POST">
</form>
The name attribute specifies a name for an element.
To take in user input, you need the corresponding
form elements such as text fields.
eg:
<form>
<input type="text" name="username"/> <br>
<input type="password" name="password"/>
</form>
12
The <input> element has many variations,
depending on the type attribute. It can be a text,
password, radio, URL, submit, etc.
If we change the input type to "radio" , it allows the
user to select only one of a number of choices.
eg:
<input type="radio" name= "gender" value="male"/>
Male <br>
<input type="radio" name= "gender"
value="female"/> Female <br>
Output:
The type "checkbox" allows the users to select more
than one option.
The submit button submits a form to its action
attribute.
eg: <input type="submit" value="Submit"/>
After the form is submitted, the data should be
processed on the server using a programming
language such as PHP.
13
The <textarea> element can be used to support
multiple lines of input. This is mostly used for the
address field. The cols and rows attributes can be
used for specifying the number of rows and columns
needed, respectively.
eg:
<textarea name= "address" cols="5" rows="10">
</textarea>
Drop-down
The <select> and <options> elements can be used
for creating something like a drop-down menu.
eg:
<label>Choose Your Favorite Player</label>
<select id="players">
<option value="Messi"> Messi </option>
<option value="Ronaldo"> Ronaldo </option>
<option value="Neymar"> Neymar </option>
</select>
The <label> tag is used for adding text labels.
14
HTML Colors
HTML colors are expressed as hexadecimal values
(0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F). Colors are displayed in
combinations of red, green, and blue (RGB).
eg: #FF0000 (Red)
#00FF00 (Green)
#0000FF (Blue)
#FFFFFF (White)
#000000 (Black)
Hex values are written using the # symbol, foloowed by
either three or six hex characters.
<!DOCTYPE HTML>
This element is used at the beginning of every HTML
document to help the browsers identify your website as an
HTML file.
<html lang ="en">
The lang attribute is used to help the browsers identify what
default language to load it in.
Embedding YouTube videos
If you want to embed a YouTube video, go to that particular
video on YouTube and click on Share -> Embed and copy the
15
embed code (A code starting with the <iframe> tag). Paste
that code on the HTML file, where you want want display the
video.
This HTML basics guide is a resource from Pythonista Planet.
For more helpful tutorials on programming, go to
https://pythonistaplanet.com
