HTML (Web) basics for a beginner

●WWW – World Wide Web
●HTML – Hyper Text Markup
Language
●XML – Extensible Markup Language
●URL – Uniform Resource Locator
●Browser – A software program which is
used to show web pages. It’s a doorway
to the Internet.
Definitions

●HTML describes the structure of Web
pages using markup.
●With HTML you can create your own
Web site.
●HTML Pages ends with .htm or .html
Example: index.html
contact.html
●HTML is Case-insensitive

●HTML Elements are the building
blocks of HTML pages.
●HTML Elements are represented by
Tags.
●Browsers do not display the HTML
Tags, but use them to render the
content of the page.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
A Simple HTML Document

● The <!DOCTYPE html> declaration represents the
document type, and helps browsers to display web
pages correctly. It must only appear once, at the top of
the page. The <!DOCTYPE> declaration is not case
sensitive.
● 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.

●The HTML element is everything
from the start tag to the end tag.
Ex: <p>My first paragraph.</p>
●HTML elements with no content are
called empty elements. Empty
elements do not have an end tag, such
as the <br> and <hr> elements.
HTML Elements

●Attributes provide additional
information about HTML elements.
●All HTML elements can
have attributes.
●Attributes are always specified in the
start tag and usually come in
name/value pairs like: name="value"
●Examples of attributes are href, src, alt,
height, width, title etc..
HTML Attributes

HTML tags are element names surrounded by
angle brackets.
Syntax: <tagname>content ...</tagname>
● HTML tags normally come in pairs like <p>
and </p>.
● The first tag in a pair is the opening tag, the
second tag is the closing tag but with
a forward slash inserted before the tag name.
● HTML tags are not case sensitive: <P> means
the same as <p>.
HTML Tags

VERSION YEAR
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014
HTML Versions

●Web pages can be created and
modified by using professional HTML
editors.
●Notepad
●Notepad++
●Adobe Dream viewer
●Sublime Editor
●Text Edit
HTML Editors

● Headings are defined with the <h1> to <h6> tags.
● <h1> defines the most important heading,<h6>
defines the least important heading.
HTML Headings
<HTML>
<HEAD>
<TITLE> Example Page</TITLE>
</HEAD>
<BODY>
<H1> Heading 1 </H1>
</BODY>
</HTML>
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6

●Search Engines use the headings to index
the structure and content of your web
pages.
●<h1> headings should be used for main
headings, followed by <h2> headings,
then the less important <h3>, and so on.
●Note: Use HTML headings for headings
only. Don't use headings to make
text BIG or bold.

●HTML links are hyperlinks.
●Links are found in nearly all web
pages. Links allow users to click their
way from page to page.
●When you move the mouse over a link,
the mouse arrow will turn into a little
hand.
HTML Links

●Syntax: <a href="url">link text</a>
●Example:
<a href="http://www.theadmi.com/">
Visit Us</a>
●The href attribute specifies the
destination address.
●The link text is the visible part.

Target Attribute
● The target attribute specifies where to open the
linked document.
The target attribute can have one of the following
values:
● _blank : Opens the linked document in a new
window or tab
● _self : Opens the linked document in the same
window/tab as it was clicked (this is default)
● _parent : Opens the linked document in the
parent frame
● _top : Opens the linked document in the full body
of the window

●Example:
<a href="https://www.w3schools.com/
" target="_blank">Visit
W3Schools!</a>
●Image as a Link:
Example: <a href="default.asp">
<img src="smiley.gif" alt="HTML
tutorial" style="width:42px;height:42px
;border:0;">
</a>

●In HTML, images are defined with
the <img> tag.
●The <img> tag is empty, it contains
attributes only, and does not have a
closing tag.
●<img> tag have src, alt, height, width,
title, etc.. attributes
HTML Images

<!DOCTYPE html>
<html>
<body>
<h2>Spectacular Mountain</h2>
<img src="pic_mountain.jpg" alt="Mountain
View" style="width:304px;height:228px;">
</body>
</html>
Explanation:
• The src attribute specifies the URL (web address)
of the image.
• The alt attribute provides an alternate text for an
image.

● If a browser cannot find an image, it will display the
value of the alt attribute.
● If the user for some reason cannot view it (because of
slow connection, an error in the src attribute, or if the
user uses a screen reader).
● The alt attribute is required. A web page will not
validate correctly without it.
● A Screen Reader is a software program that reads the
HTML code, converts the text, and allows the user to
"listen" to the content. Screen readers are useful for
people who are blind, visually impaired, or learning
disabled.
Importance of Alt Attribute

● 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.
HTML Tables

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>50</td>
</tr>
<tr>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>80</td>
</tr>
</table>
</body>
</html>

● 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 {
}
● If you want the borders to collapse into one border, add the CSS border-
collapse property:
● table, th, td {
border-collapse: collapse;
}
● 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.

Cells that Span Many Columns:
● To make a cell span more than one column, use
the colspan attribute.
● <table style="width:50%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>

Cells that Span Many Rows:
● To make a cell span more than one row, use
the rowspan attribute.
● <table style="width:50%">
<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>

● Lists are two types: Unordered List and Ordered List
● An Unordered list starts with the <ul> tag.
● An Ordered list starts with the <ol> tag.
● Each list item starts with the <li> tag.
● The Unordered list items will be marked with bullets
(small black circles) by default and Ordered list items
with numbers by default.
HTML Lists

● <ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
● <ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
● <ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
● <ul style="list-style-type:none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Unordered List

● <ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
● <ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
● <ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
● <ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
● <ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Ordered List

● <!DOCTYPE html>
● <html>
● <body>
● <form action="/action_page.php">
● <fieldset>
● <legend>Personal information:</legend>
● First name:<br>
● <input type="text" name="firstname">
● <br>
● Last name:<br>
● <input type="text" name="lastname">
● <br><br>
● <input type="submit" value="Submit">
● </fieldset>
● </form>
● </body>
● </html>
HTML Forms

HTML Paragraphs
● The HTML <p> element defines a paragraph.
● Ex: <p>This is another paragraph.</p>
● Note: Browsers automatically add some white
space (a margin) before and after a paragraph.
HTML Quotes
● The HTML <q> element defines a Short
Quotation.
● Ex: <p>WWF's goal is to: <q>Build a future where
people live in harmony with nature.</q></p>
Few More Tags

HTML Comments
● You can add comments to your HTML source
by using the following syntax:
Syntax: 
Example: 
<p>This is a paragraph.</p>

● Comments are not displayed by the browser,
but they can help document your HTML
source code.

● Every HTML element has a default display value
depending on what type of element it is. The default
display value for most elements is block or inline.
Block-level Elements:
● A block-level element always starts on a new line and
takes up the full width available (stretches out to the
left and right as far as it can).
Examples of block-level elements:
● <div>
● <h1> - <h6>
● <p>
● <form>
HTML Block and Inline Elements

Inline Elements:
●An inline element does not start on a
new line and only takes up as much
width as necessary.
Examples of inline elements:
●<span>
●<a>
●<img>

Formatting elements were designed to display special
types of text:
● <b> - Bold text
● <strong> - Important text
● <i> - Italic text
● <em> - Emphasized text
● <mark> - Marked text
● <small> - Small text
● <del> - Deleted text
● <ins> - Inserted text
● <sub> - Subscript text
● <sup> - Superscript text
HTML Text Formatting

● Setting the style of an HTML element, can be
done with the style attribute.
● The HTML style attribute has the
following syntax:
<tagname style="property:value;">
● The property is a CSS property. The value is a
CSS value.
● Examples:
● <h1 style="color:blue;">This is a heading</h1>
● <p style="text-align:center;">Centered
paragraph.</p>
HTML Styles

● JavaScript makes HTML pages more dynamic and
interactive.
● The <script> tag is used to define a client-side script
(JavaScript).
● 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 Script

Thank You
Nimmakayala jayapal reddy,
Digital marketing trainer &
consultant
Whatsapp: +91-8008877940
website: www.nimmakayalajayapalreddy.com

HTML (Web) basics for a beginner

More Related Content

What's hot

What's hot (20)

Similar to HTML (Web) basics for a beginner

Similar to HTML (Web) basics for a beginner (20)

More from Jayapal Reddy Nimmakayala

More from Jayapal Reddy Nimmakayala (7)

Recently uploaded

Recently uploaded (20)

HTML (Web) basics for a beginner