SlideShare a Scribd company logo
1 of 24
Afrasiyab Haider
16-ARID-2
HTML-BASICS
Introduction to Computing
HTML:
•Hyper Text Markup Language
• HTML is a Language, as it has code-words and
syntax like any other language.
• Hyper-Text is the method by which you move
around on the web — by clicking on special text
called hyperlinks
• Markup is what HTML tags do to the text inside
them. They mark it as a certain type of text
INTRO TO HTML BASICS:
• HTML is a plain-text file that can be created using a text
editor like Notepad.
• When creating HTML files for the web, make sure you
save them as .html – or they won’t work.
SOFTWARE USE TO CREATE WEB-PAGE IN
HTML
•Notepad
•Notepad++
HOW TO WRITE CODE
• Select Language
• Start Writing Code
TAGS OF HTML
Opening Tag <>
Closing Tag </>
Basic Tags used in HTML are
1. <!DOCTYPE HTML>
2. <HTML> Start Coding </HTML>
3. <head> Header </head>
4. <title> Title of Web-Page </title>
5. <body> Body of Web-Page </body>
6. <h1> Heading </h1> (after h6 the font size will be small)
TAGS OF HTML
1. <p> Paragraph </p>
2. <br> Break row </br>
3. <strong>Makes text Bold</strong>
4. <b> Bold </b>
5. <i> Italic </i>
6. <mark> Highlighter </mark>
7. <img> Inserting Image </img>
8. <a href=“ ”> Insrting Hyper Link </a>
9. <div>To insert a section e.g. Insert text-box </div>
FIRST HTML PAGE
<!DOCTYPE HTML>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
Opening tag
Closing tag
An HTML element consists of an opening tag, a closing
tag and the content inside.
FIRST HTML PAGE
<!DOCTYPE HTML>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
FIRST HTML PAGE
<!DOCTYPE HTML>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
HTML body
EXAMPLE
HTML body
TAGS
• Hyperlink Tags
• Image Tags
• Text formatting tags
<a href="http://www.facebook.com/"
title=“Facebook">Link to Facebook</a>
<img src=“fb.jpg" alt="logo“> </img>
This text is <i>emphasized.</i>
<br>new line</br>
This one is <strong>more emphasized.</strong>
EXAMPLE
SIMPLE TAGS DEMO
<!DOCTYPE HTML>
<html>
<head>
<title>Simple Tags Demo</title>
</head>
<body>
<a href="http://www.facebook.com/" title=
“FB">This is a link of FB </a>
<br> </br>
<img src="C:UsersAfrasiyab
HaiderDesktopfb.jpg" alt=“fb"> </img>
</body>
</html>
EXAMPLE
HEADING & PARAGRAPH TAG
Heading Tags (h1 – h6)
Paragraph Tags
<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
<h3>Sub heading 3</h3>
<p>This is my first paragraph</p>
<p>This is my second paragraph</p>
EXAMPLE
HEADING & PARAGRAPH TAG
Heading Tags (h1 – h6) with Mark:
Paragraph Tags with Mark:
<h1><mark> Heading 1 </mark></h1>
<h2>Sub heading 2</h2>
<h3>Sub <mark> heading 3 </mark></h3>
<p>This is my <mark> first paragraph </mark></p>
<p><mark>This is my second paragraph</mark></p>
EXAMPLE
EXAMPLE OF DIV
<!DOCTYPE HTML>
<html>
<head><title>Headings and paragraphs</title></head>
<body>
<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
<h3>Sub heading 3</h3>
<p>This is my first paragraph</p>
<p>This is my second paragraph</p>
<div style="background:skyblue">
This is a div</div>
</body>
</html>
EXAMPLE
DO YOU HAVE ANY QUESTIONS
(RELEVANT ONLY)

More Related Content

What's hot (20)

Html ppt
Html pptHtml ppt
Html ppt
 
Html
HtmlHtml
Html
 
Html Ppt
Html PptHtml Ppt
Html Ppt
 
Learning Html
Learning HtmlLearning Html
Learning Html
 
HTML Tags
HTML TagsHTML Tags
HTML Tags
 
HTML Text formatting tags
HTML Text formatting tagsHTML Text formatting tags
HTML Text formatting tags
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
Html ppt
Html pptHtml ppt
Html ppt
 
Eye catching HTML BASICS tips: Learn easily
Eye catching HTML BASICS tips: Learn easilyEye catching HTML BASICS tips: Learn easily
Eye catching HTML BASICS tips: Learn easily
 
Html basics
Html basicsHtml basics
Html basics
 
Html ppt
Html pptHtml ppt
Html ppt
 
HTML presentation for beginners
HTML presentation for beginnersHTML presentation for beginners
HTML presentation for beginners
 
Html
HtmlHtml
Html
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
Html
HtmlHtml
Html
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
Html Slide Part-1
Html Slide Part-1Html Slide Part-1
Html Slide Part-1
 
Html ppt computer
Html ppt computerHtml ppt computer
Html ppt computer
 
Html ppt
Html pptHtml ppt
Html ppt
 
Div tag presentation
Div tag presentationDiv tag presentation
Div tag presentation
 

Viewers also liked

The Basics of (X)HTML Tags
The Basics of (X)HTML TagsThe Basics of (X)HTML Tags
The Basics of (X)HTML TagsLearningNerd
 
Handout Creating Hypertext In Word
Handout Creating Hypertext In WordHandout Creating Hypertext In Word
Handout Creating Hypertext In WordRebecca Johnson
 
HTML_Slideshow1
HTML_Slideshow1HTML_Slideshow1
HTML_Slideshow1ldehn
 
HTML Basics 2 workshop
HTML Basics 2 workshopHTML Basics 2 workshop
HTML Basics 2 workshopJohn Allan
 
HTML Basics 1 workshop
HTML Basics 1 workshopHTML Basics 1 workshop
HTML Basics 1 workshopJohn Allan
 
HTML a Element: Link to External Page
HTML a Element: Link to External PageHTML a Element: Link to External Page
HTML a Element: Link to External Pagelhosford
 
HTML (Hyper Text Markup Language)
HTML (Hyper Text Markup Language)HTML (Hyper Text Markup Language)
HTML (Hyper Text Markup Language)Asra Hameed
 
Netiquette Rules
Netiquette RulesNetiquette Rules
Netiquette RulesRaquelPG96
 
Protocol Ppt[1]
Protocol Ppt[1]Protocol Ppt[1]
Protocol Ppt[1]anil933
 
TCP/IP Network ppt
TCP/IP Network pptTCP/IP Network ppt
TCP/IP Network pptextraganesh
 
Internet protocol (ip) ppt
Internet protocol (ip) pptInternet protocol (ip) ppt
Internet protocol (ip) pptDulith Kasun
 

Viewers also liked (18)

The Basics of (X)HTML Tags
The Basics of (X)HTML TagsThe Basics of (X)HTML Tags
The Basics of (X)HTML Tags
 
HTML Tags
HTML TagsHTML Tags
HTML Tags
 
Handout Creating Hypertext In Word
Handout Creating Hypertext In WordHandout Creating Hypertext In Word
Handout Creating Hypertext In Word
 
HTML_Slideshow1
HTML_Slideshow1HTML_Slideshow1
HTML_Slideshow1
 
HTML Basics 2 workshop
HTML Basics 2 workshopHTML Basics 2 workshop
HTML Basics 2 workshop
 
HTML Basics 1 workshop
HTML Basics 1 workshopHTML Basics 1 workshop
HTML Basics 1 workshop
 
Html tags
Html tagsHtml tags
Html tags
 
HTML a Element: Link to External Page
HTML a Element: Link to External PageHTML a Element: Link to External Page
HTML a Element: Link to External Page
 
Tags in html
Tags in htmlTags in html
Tags in html
 
HTML (Hyper Text Markup Language)
HTML (Hyper Text Markup Language)HTML (Hyper Text Markup Language)
HTML (Hyper Text Markup Language)
 
Netiquette Rules
Netiquette RulesNetiquette Rules
Netiquette Rules
 
Hypertext
HypertextHypertext
Hypertext
 
Protocol Ppt[1]
Protocol Ppt[1]Protocol Ppt[1]
Protocol Ppt[1]
 
Understanding the Internet of Things Protocols
Understanding the Internet of Things ProtocolsUnderstanding the Internet of Things Protocols
Understanding the Internet of Things Protocols
 
Netiquette
NetiquetteNetiquette
Netiquette
 
Html Ppt
Html PptHtml Ppt
Html Ppt
 
TCP/IP Network ppt
TCP/IP Network pptTCP/IP Network ppt
TCP/IP Network ppt
 
Internet protocol (ip) ppt
Internet protocol (ip) pptInternet protocol (ip) ppt
Internet protocol (ip) ppt
 

Similar to Html and its tags

215077679 introduction to HTML
215077679  introduction to HTML215077679  introduction to HTML
215077679 introduction to HTMLXolani Madlopha
 
Basics of html for web development by software outsourcing company india
Basics of html for web development   by software outsourcing company indiaBasics of html for web development   by software outsourcing company india
Basics of html for web development by software outsourcing company indiaJignesh Aakoliya
 
HYPER TEXT MARKUP LANGUAGE BASIC LESSONS
HYPER TEXT MARKUP LANGUAGE BASIC LESSONSHYPER TEXT MARKUP LANGUAGE BASIC LESSONS
HYPER TEXT MARKUP LANGUAGE BASIC LESSONSdivyajohnisg
 
Introduction to PHP - Slide 1
Introduction to PHP - Slide 1 Introduction to PHP - Slide 1
Introduction to PHP - Slide 1 pctechnology
 
Ankit (221348051) BCA-Aiml.pptx
Ankit (221348051) BCA-Aiml.pptxAnkit (221348051) BCA-Aiml.pptx
Ankit (221348051) BCA-Aiml.pptxHKShab
 
02 HTML-01.pdf
02 HTML-01.pdf02 HTML-01.pdf
02 HTML-01.pdfEshaYasir1
 
Presentation on HTML
Presentation on HTMLPresentation on HTML
Presentation on HTMLsatvirsandhu9
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to htmleShikshak
 
What is HTML - An Introduction to HTML (Hypertext Markup Language)
What is HTML - An Introduction to HTML (Hypertext Markup Language)What is HTML - An Introduction to HTML (Hypertext Markup Language)
What is HTML - An Introduction to HTML (Hypertext Markup Language)Ahsan Rahim
 
3 1-html-fundamentals-110302100520-phpapp02
3 1-html-fundamentals-110302100520-phpapp023 1-html-fundamentals-110302100520-phpapp02
3 1-html-fundamentals-110302100520-phpapp02Aditya Varma
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTMLAmeer Khan
 
Coding Class #1 PowerPoint Slideshow for Beginners
Coding Class #1 PowerPoint Slideshow for BeginnersCoding Class #1 PowerPoint Slideshow for Beginners
Coding Class #1 PowerPoint Slideshow for Beginnersdemagistrisrock
 
Learn HTML at ASIT
Learn HTML at ASITLearn HTML at ASIT
Learn HTML at ASITASIT
 

Similar to Html and its tags (20)

An-Introduction-to-HTML
An-Introduction-to-HTMLAn-Introduction-to-HTML
An-Introduction-to-HTML
 
215077679 introduction to HTML
215077679  introduction to HTML215077679  introduction to HTML
215077679 introduction to HTML
 
HTML & CSS.ppt
HTML & CSS.pptHTML & CSS.ppt
HTML & CSS.ppt
 
Basics of html for web development by software outsourcing company india
Basics of html for web development   by software outsourcing company indiaBasics of html for web development   by software outsourcing company india
Basics of html for web development by software outsourcing company india
 
HYPER TEXT MARKUP LANGUAGE BASIC LESSONS
HYPER TEXT MARKUP LANGUAGE BASIC LESSONSHYPER TEXT MARKUP LANGUAGE BASIC LESSONS
HYPER TEXT MARKUP LANGUAGE BASIC LESSONS
 
Introduction to PHP - Slide 1
Introduction to PHP - Slide 1 Introduction to PHP - Slide 1
Introduction to PHP - Slide 1
 
Ankit (221348051) BCA-Aiml.pptx
Ankit (221348051) BCA-Aiml.pptxAnkit (221348051) BCA-Aiml.pptx
Ankit (221348051) BCA-Aiml.pptx
 
02 HTML-01.pdf
02 HTML-01.pdf02 HTML-01.pdf
02 HTML-01.pdf
 
HTML guide for beginners
HTML guide for beginnersHTML guide for beginners
HTML guide for beginners
 
Presentation on HTML
Presentation on HTMLPresentation on HTML
Presentation on HTML
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
1. html introduction
1. html introduction1. html introduction
1. html introduction
 
HTML 5 Tutorial
HTML 5 TutorialHTML 5 Tutorial
HTML 5 Tutorial
 
What is HTML - An Introduction to HTML (Hypertext Markup Language)
What is HTML - An Introduction to HTML (Hypertext Markup Language)What is HTML - An Introduction to HTML (Hypertext Markup Language)
What is HTML - An Introduction to HTML (Hypertext Markup Language)
 
HTML Fundamentals
HTML FundamentalsHTML Fundamentals
HTML Fundamentals
 
3 1-html-fundamentals-110302100520-phpapp02
3 1-html-fundamentals-110302100520-phpapp023 1-html-fundamentals-110302100520-phpapp02
3 1-html-fundamentals-110302100520-phpapp02
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
Coding Class #1 PowerPoint Slideshow for Beginners
Coding Class #1 PowerPoint Slideshow for BeginnersCoding Class #1 PowerPoint Slideshow for Beginners
Coding Class #1 PowerPoint Slideshow for Beginners
 
Learn HTML at ASIT
Learn HTML at ASITLearn HTML at ASIT
Learn HTML at ASIT
 
Html
Html Html
Html
 

More from Afrasiyab Haider

How to know value of a company
How to know value of a companyHow to know value of a company
How to know value of a companyAfrasiyab Haider
 
Providing feedback for effective listening
Providing feedback for effective listeningProviding feedback for effective listening
Providing feedback for effective listeningAfrasiyab Haider
 
Rectification of errors (Financial Accounting)
Rectification of errors (Financial Accounting)Rectification of errors (Financial Accounting)
Rectification of errors (Financial Accounting)Afrasiyab Haider
 
Octal to binary and octal to hexa decimal conversions
Octal to binary and octal to hexa decimal conversionsOctal to binary and octal to hexa decimal conversions
Octal to binary and octal to hexa decimal conversionsAfrasiyab Haider
 
RUP - Rational Unified Process
RUP - Rational Unified ProcessRUP - Rational Unified Process
RUP - Rational Unified ProcessAfrasiyab Haider
 
Facts finding techniques in Database
Facts finding techniques in Database Facts finding techniques in Database
Facts finding techniques in Database Afrasiyab Haider
 
File organization in database
File organization in databaseFile organization in database
File organization in databaseAfrasiyab Haider
 
Software development life cycle
Software development life cycleSoftware development life cycle
Software development life cycleAfrasiyab Haider
 
Expected value of random variables
Expected value of random variablesExpected value of random variables
Expected value of random variablesAfrasiyab Haider
 
Class diagram of school management system (OOP)
Class diagram of school management system (OOP)Class diagram of school management system (OOP)
Class diagram of school management system (OOP)Afrasiyab Haider
 
What is difference between dbms and rdbms
What is difference between dbms and rdbmsWhat is difference between dbms and rdbms
What is difference between dbms and rdbmsAfrasiyab Haider
 
Database development life cycle
Database development life cycleDatabase development life cycle
Database development life cycleAfrasiyab Haider
 
Relation of psychology and IT
Relation of psychology and ITRelation of psychology and IT
Relation of psychology and ITAfrasiyab Haider
 
What is Psychology and variables in psychology?
What is Psychology and variables in psychology?What is Psychology and variables in psychology?
What is Psychology and variables in psychology?Afrasiyab Haider
 
History of operating systems
History of operating systemsHistory of operating systems
History of operating systemsAfrasiyab Haider
 
Expected value of random variables
Expected value of random variablesExpected value of random variables
Expected value of random variablesAfrasiyab Haider
 
File organization in database
File organization in databaseFile organization in database
File organization in databaseAfrasiyab Haider
 
Should prisoners be allowed to cast vote?
Should prisoners be allowed to cast vote?Should prisoners be allowed to cast vote?
Should prisoners be allowed to cast vote?Afrasiyab Haider
 
Politics and martial law in pakistan
Politics and martial law in pakistanPolitics and martial law in pakistan
Politics and martial law in pakistanAfrasiyab Haider
 

More from Afrasiyab Haider (20)

How to know value of a company
How to know value of a companyHow to know value of a company
How to know value of a company
 
Providing feedback for effective listening
Providing feedback for effective listeningProviding feedback for effective listening
Providing feedback for effective listening
 
Rectification of errors (Financial Accounting)
Rectification of errors (Financial Accounting)Rectification of errors (Financial Accounting)
Rectification of errors (Financial Accounting)
 
Octal to binary and octal to hexa decimal conversions
Octal to binary and octal to hexa decimal conversionsOctal to binary and octal to hexa decimal conversions
Octal to binary and octal to hexa decimal conversions
 
RUP - Rational Unified Process
RUP - Rational Unified ProcessRUP - Rational Unified Process
RUP - Rational Unified Process
 
Normalization in Database
Normalization in DatabaseNormalization in Database
Normalization in Database
 
Facts finding techniques in Database
Facts finding techniques in Database Facts finding techniques in Database
Facts finding techniques in Database
 
File organization in database
File organization in databaseFile organization in database
File organization in database
 
Software development life cycle
Software development life cycleSoftware development life cycle
Software development life cycle
 
Expected value of random variables
Expected value of random variablesExpected value of random variables
Expected value of random variables
 
Class diagram of school management system (OOP)
Class diagram of school management system (OOP)Class diagram of school management system (OOP)
Class diagram of school management system (OOP)
 
What is difference between dbms and rdbms
What is difference between dbms and rdbmsWhat is difference between dbms and rdbms
What is difference between dbms and rdbms
 
Database development life cycle
Database development life cycleDatabase development life cycle
Database development life cycle
 
Relation of psychology and IT
Relation of psychology and ITRelation of psychology and IT
Relation of psychology and IT
 
What is Psychology and variables in psychology?
What is Psychology and variables in psychology?What is Psychology and variables in psychology?
What is Psychology and variables in psychology?
 
History of operating systems
History of operating systemsHistory of operating systems
History of operating systems
 
Expected value of random variables
Expected value of random variablesExpected value of random variables
Expected value of random variables
 
File organization in database
File organization in databaseFile organization in database
File organization in database
 
Should prisoners be allowed to cast vote?
Should prisoners be allowed to cast vote?Should prisoners be allowed to cast vote?
Should prisoners be allowed to cast vote?
 
Politics and martial law in pakistan
Politics and martial law in pakistanPolitics and martial law in pakistan
Politics and martial law in pakistan
 

Recently uploaded

Top 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development CompaniesTop 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development CompaniesTopCSSGallery
 
ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctBrainSell Technologies
 
Microsoft BitLocker Bypass Attack Method.pdf
Microsoft BitLocker Bypass Attack Method.pdfMicrosoft BitLocker Bypass Attack Method.pdf
Microsoft BitLocker Bypass Attack Method.pdfOverkill Security
 
WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024Lorenzo Miniero
 
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxFIDO Alliance
 
Introduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxIntroduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxFIDO Alliance
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe中 央社
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentationyogeshlabana357357
 
Introduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDMIntroduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDMKumar Satyam
 
Event-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream ProcessingEvent-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream ProcessingScyllaDB
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Victor Rentea
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...panagenda
 
Navigating the Large Language Model choices_Ravi Daparthi
Navigating the Large Language Model choices_Ravi DaparthiNavigating the Large Language Model choices_Ravi Daparthi
Navigating the Large Language Model choices_Ravi DaparthiRaviKumarDaparthi
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Victor Rentea
 
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....rightmanforbloodline
 
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Skynet Technologies
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightSafe Software
 
CORS (Kitworks Team Study 양다윗 발표자료 240510)
CORS (Kitworks Team Study 양다윗 발표자료 240510)CORS (Kitworks Team Study 양다윗 발표자료 240510)
CORS (Kitworks Team Study 양다윗 발표자료 240510)Wonjun Hwang
 
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireMicrosoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireExakis Nelite
 
JavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuideJavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuidePixlogix Infotech
 

Recently uploaded (20)

Top 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development CompaniesTop 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development Companies
 
ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage Intacct
 
Microsoft BitLocker Bypass Attack Method.pdf
Microsoft BitLocker Bypass Attack Method.pdfMicrosoft BitLocker Bypass Attack Method.pdf
Microsoft BitLocker Bypass Attack Method.pdf
 
WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024
 
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptx
 
Introduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxIntroduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptx
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentation
 
Introduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDMIntroduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDM
 
Event-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream ProcessingEvent-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream Processing
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
 
Navigating the Large Language Model choices_Ravi Daparthi
Navigating the Large Language Model choices_Ravi DaparthiNavigating the Large Language Model choices_Ravi Daparthi
Navigating the Large Language Model choices_Ravi Daparthi
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
 
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
 
CORS (Kitworks Team Study 양다윗 발표자료 240510)
CORS (Kitworks Team Study 양다윗 발표자료 240510)CORS (Kitworks Team Study 양다윗 발표자료 240510)
CORS (Kitworks Team Study 양다윗 발표자료 240510)
 
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireMicrosoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - Questionnaire
 
JavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuideJavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate Guide
 

Html and its tags

  • 1.
  • 4. HTML: •Hyper Text Markup Language • HTML is a Language, as it has code-words and syntax like any other language. • Hyper-Text is the method by which you move around on the web — by clicking on special text called hyperlinks • Markup is what HTML tags do to the text inside them. They mark it as a certain type of text
  • 5. INTRO TO HTML BASICS: • HTML is a plain-text file that can be created using a text editor like Notepad. • When creating HTML files for the web, make sure you save them as .html – or they won’t work.
  • 6. SOFTWARE USE TO CREATE WEB-PAGE IN HTML •Notepad •Notepad++
  • 7. HOW TO WRITE CODE • Select Language • Start Writing Code
  • 8. TAGS OF HTML Opening Tag <> Closing Tag </> Basic Tags used in HTML are 1. <!DOCTYPE HTML> 2. <HTML> Start Coding </HTML> 3. <head> Header </head> 4. <title> Title of Web-Page </title> 5. <body> Body of Web-Page </body> 6. <h1> Heading </h1> (after h6 the font size will be small)
  • 9. TAGS OF HTML 1. <p> Paragraph </p> 2. <br> Break row </br> 3. <strong>Makes text Bold</strong> 4. <b> Bold </b> 5. <i> Italic </i> 6. <mark> Highlighter </mark> 7. <img> Inserting Image </img> 8. <a href=“ ”> Insrting Hyper Link </a> 9. <div>To insert a section e.g. Insert text-box </div>
  • 10. FIRST HTML PAGE <!DOCTYPE HTML> <html> <head> <title>My First HTML Page</title> </head> <body> <p>This is some text...</p> </body> </html> Opening tag Closing tag An HTML element consists of an opening tag, a closing tag and the content inside.
  • 11. FIRST HTML PAGE <!DOCTYPE HTML> <html> <head> <title>My First HTML Page</title> </head> <body> <p>This is some text...</p> </body> </html>
  • 12. FIRST HTML PAGE <!DOCTYPE HTML> <html> <head> <title>My First HTML Page</title> </head> <body> <p>This is some text...</p> </body> </html> HTML body
  • 14. TAGS • Hyperlink Tags • Image Tags • Text formatting tags <a href="http://www.facebook.com/" title=“Facebook">Link to Facebook</a> <img src=“fb.jpg" alt="logo“> </img> This text is <i>emphasized.</i> <br>new line</br> This one is <strong>more emphasized.</strong>
  • 16. SIMPLE TAGS DEMO <!DOCTYPE HTML> <html> <head> <title>Simple Tags Demo</title> </head> <body> <a href="http://www.facebook.com/" title= “FB">This is a link of FB </a> <br> </br> <img src="C:UsersAfrasiyab HaiderDesktopfb.jpg" alt=“fb"> </img> </body> </html>
  • 18. HEADING & PARAGRAPH TAG Heading Tags (h1 – h6) Paragraph Tags <h1>Heading 1</h1> <h2>Sub heading 2</h2> <h3>Sub heading 3</h3> <p>This is my first paragraph</p> <p>This is my second paragraph</p>
  • 20. HEADING & PARAGRAPH TAG Heading Tags (h1 – h6) with Mark: Paragraph Tags with Mark: <h1><mark> Heading 1 </mark></h1> <h2>Sub heading 2</h2> <h3>Sub <mark> heading 3 </mark></h3> <p>This is my <mark> first paragraph </mark></p> <p><mark>This is my second paragraph</mark></p>
  • 22. EXAMPLE OF DIV <!DOCTYPE HTML> <html> <head><title>Headings and paragraphs</title></head> <body> <h1>Heading 1</h1> <h2>Sub heading 2</h2> <h3>Sub heading 3</h3> <p>This is my first paragraph</p> <p>This is my second paragraph</p> <div style="background:skyblue"> This is a div</div> </body> </html>
  • 24. DO YOU HAVE ANY QUESTIONS (RELEVANT ONLY)