Scribd
Upload
49 views16 pages

HTML Basics Guide Pythonista Planet

HTML is the standard markup language used to create web pages. The basic structure of an HTML document includes opening and closing <html> tags which contain a <head> and <body> section. The <head> contains non-visible page information while the <body> holds visible content like paragraphs, headings, images and links. HTML uses tags to identify different semantic elements and attributes can modify tags to change things like text formatting, image size, and link destinations. Common tags include <p> for paragraphs, <img> for images, and <a> for links.

Uploaded by

project satu
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
49 views16 pages

HTML Basics Guide Pythonista Planet

HTML is the standard markup language used to create web pages. The basic structure of an HTML document includes opening and closing <html> tags which contain a <head> and <body> section. The <head> contains non-visible page information while the <body> holds visible content like paragraphs, headings, images and links. HTML uses tags to identify different semantic elements and attributes can modify tags to change things like text formatting, image size, and link destinations. Common tags include <p> for paragraphs, <img> for images, and <a> for links.

Uploaded by

project satu
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
Download as pdf or txt
You are on page 1/ 16

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

You might also like