Scribd
Upload
64 views10 pages

HTML Lecture 1: Institutional Training - in

The document provides an overview of HTML including that it is a markup language used to define the structure of a web page using tags, describes some common HTML tags like headings, paragraphs, text formatting, and attributes, and gives an example of using HTML tags and attributes to structure a basic web page with headings and paragraphs.

Uploaded by

Amrit
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
64 views10 pages

HTML Lecture 1: Institutional Training - in

The document provides an overview of HTML including that it is a markup language used to define the structure of a web page using tags, describes some common HTML tags like headings, paragraphs, text formatting, and attributes, and gives an example of using HTML tags and attributes to structure a basic web page with headings and paragraphs.

Uploaded by

Amrit
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 10

HTML Lecture 1

Industrial Training IT Company


Institutional Training - In

B.Tech / MCA
4 Year

Theory

8 Months - Language

Web Development

Career - Web Developer / Software Engineer / Web Programmer


Web Designer

Web Applications/ Web Sites

Design
HTML / CSS (cascading Style Sheet) Website designer

Database Design

SQL Server / MYSQL

Coding
PHP / Asp.Net/Java

HTML / CSS - Design


Photoshop Images Edit
PHP/ ASP.net - Coding
MYSQL - Database

Minor Project

6 Months
Javascript / Jquery
Responsive Design
PHP Cake PHP
ASP.NET C#.net (OOPS)
Major Project

HTML Lecture 1
HTML 5 Version
HTML hyerptext markup language
HTML is not a programming language, its a markup language
What is markup language
Markup language consists of markup tags (HTML Tags)
Markup Tags
Markup tags are keywords surrounded by <> angle brackets
Markup tags normally comes in pairs
<p>
Start Tag
Opening Tags

</p>
End Tag
Closing Tags

<b> </b>

Some tags are not in pairs


<br>
<hr>

HTML Element
<p style=color:red > This is paragraph </p>
Element consist of Tags + Content+ Attribute/Style

HTML Document / Web Page


Document / Page written in HTML

HTML 5
Notepad - Error
Dreamweaver

IDE - Microsoft Webmatrix


Integrated Development Environment Software Language Code , Debug , Run
Test
HTML Webmatrix
Java netbeans
Asp.net visual studio
C/C++ - Turbo C

Web Matrix
Create New Site
Template Gallery
HTML

Site Name NipunSite


Folder Click
Index.html

HTML Structure

<!Doctype HTML> - ite tells the Browser version of HTML


<html>

<head>

<title> </title>
<meta tags> - SEO Search Engine Optimization

<body>

</body>

</html>

First Code

<!DOCTYPE html>
<html lang="en">
<head>
<title>Its my first page</title>
</head>
<body>
Anuj Khanna
NSPL
</body>
</html>

Heading Tags

<!DOCTYPE html>
<html lang="en">
<head>
<title>Its my first page</title>
</head>
<body>
<h1>Heading
<h2>Heading
<h3>Heading
<h4>Heading
<h5>Heading
<h6>Heading

1</h1>
2</h2>
3</h3>
4</h4>
5</h5>
6</h6>

</body>
</html>

Paragraph Tags

<!DOCTYPE html>
<html lang="en">
<head>
<title>Its my first page</title>
</head>
<body>
<h1>Cricket News</h1>
<p>India Wins Wordlcup in Brisbane.</p>
</body>
</html>

Text Tags
<!DOCTYPE html>
<html lang="en">
<head>
<title>Its my first page</title>
</head>
<body>
<h1>Cricket News</h1>
<p>India Wins Wordlcup in Brisbane.</p>
<b>Bold</b>
<s>Strike Through</s>
<i>Italics</i>
<em>Emphasized</em>
<u>Underline</u>
10<sub>Subscript</sub>
O<sup>superscript</sup>
<del>Deleted</del>
for

<pre>Pre

matted</pre>
</body>
</html>

Attribute
Attribute are style modifiers
HTML elements can have attributes

Attributes comes in name:value pair

Color:red
Fontsize:40px

Inline Style
Styles we write inside opening tags

<!DOCTYPE html>
<html lang="en">
<head>
<title>Its my first page</title>
</head>
<body style="background-color: #eacccc">
<h1 style="color: #f00;background-color: #808080">Cricket News</h1>
<p style="font-size: 40px">India Wins Wordlcup in Brisbane.</p>
<b>Bold</b>
<s>Strike Through</s>
<i>Italics</i>
<em>Emphasized</em>
<u>Underline</u>
10<sub>2</sub>
O<sup>2</sup>
<del>Deleted</del>
<pre>Pre
for
matted</pre>
</body>
</html>

Span

To give different attributes to selected text

<!DOCTYPE html>
<html lang="en">

<head>
<title>Its my first page</title>
</head>
<body style="background-color: #eacccc">
<h1 style="color: #f00;background-color: #808080">Cricket News</h1>
<p>Today, the NSPL is focusing on solving issues for<span style="color:#f00 ">customers
worldwide by globally</span> providing innovative and secure IT Solutions. With over 1250
customers in 12 Countries, NSPL stays ahead with its always first approach with innovated
solutions.
Now NSPL opened its <span style="color: #00ff21">Global Research & Training Centre in
world</span> famous city of Punjab, Amritsar. At NSPL Research & Training Centre (RTC), we
provide research facilities to pursue fundamental research in various fields of computer
sciences and deliver advanced IT training on latest technologies with industry oriented
curriculum.</p>
</body>
</html>

&nbsp; - non breaking space & Break <br>

<!DOCTYPE html>
<html lang="en">
<head>
<title>Its my first page</title>
</head>
<body style="background-color: #eacccc">
&nbsp;&nbsp;&nbsp; NSPL RTC
<br>
SCO 4, Ranjeet Aveneue
<br>
Amritsar
</body>
</html>

Assignment
Create your CV in web page using HTML Text Tags

You might also like