SlideShare ist ein Scribd-Unternehmen logo
1 von 30
Intro to HTML The Basics
HTML HTML  means  Hyper Text Markup Language . HTML is a language that  helps us to create web sites in the Internet . HTML  helps to coordinate human and the computer . So we have to use some codes to explain to computer what are we going to do. Therefore we use HTML to give instructions to create web sites.
Why We Learn HTML?
Tim Berners-Lee  ( CERN physicist) Creator of HTML & WWW CERN is an European Organization for Nuclear Research  at  Geneva
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Beginning of HTML
Beginning of  HTML (cont.) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
HTML Tags ,[object Object],[object Object]
Software & Text Editors ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
HTML Tags ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Attributes ,[object Object],[object Object],[object Object],[object Object],[object Object]
HTML Tags
Basic Tags <html></html> Creates an HTML document <head></head> Sets off the title and other  information that isn't displayed on  the Web page itself <body></body> Sets off the visible portion of the  document
Header Tags <title></title> Puts the name of the document in  the title bar   Things in the header section do not appear in the browser
Body Attributes <body bgcolor=?> Sets the background color, using name or  hex value <body text=?> Sets the text color, using name or hex value <body background=url> Specifies an image file to be used as  background  <body vlink=?> Sets the color of followed links, using name  or hex   value <body alink=?> Sets the color of links on click
Text Formatting Tags 1 <hl></hl> Creates the largest header <h6></h6> Creates the smallest header <b></b> Creates bold text <i></i> Creates italic text
Text Formatting Tags 2  <strong></strong>   Emphasizes a word (with italic or bold) <font size=“?”></font> Sets size of font <font color=“?”></font> Sets font color, using name or hex value <font face=“?”></font> Set font style like Comic Sans MS
Paragraph Formatting Tags  <p></p> Creates a new paragraph <p align=?> Aligns a paragraph to the left, right, or  center <br> Inserts a line break <blockquote></blockquote>   Indents text from both sides
[object Object],HTML Formatting Sample code…. <ol> List Name  <li> list item 1 <li> list item 2 <li> list item 3 <li> list item 4 </ol> Browser view… Yankees Starting Lineup  1. Johnny Damon 2. Derek Jeter 3. Bobby Abreu 4. Robbie McGarry
[object Object],HTML Formatting Sample code…. <ul> List Name  <li> list item 1 <li> list item 2 <li> list item 3 <li> list item 4 </ul> ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],HTML Formatting Sample code…. <dl>  <dt>Vocab Word 1  <dd>Definition 1 <dt>Vocab Word 2 <dd>Definition 2 </dl> Browser view… Rock hard object, made.. Ball round object….
Table Formatting  Tags ,[object Object],[object Object],[object Object],[object Object],[object Object]
How Tables Work <tr> </tr> <table> </table> <td> </td> <td> </td> </td> <td> <tr> </tr> <td> </td> <td> </td> </td> <td> <tr> </tr> <td> </td> <td> </td> </td> <td>
Images Img = image src = source of the image alt = stands for alternate and is used to name the image, important for visually impaired users (text to speech) <img src =“nameoftheimage.jpg” alt=“description”> <img src =“nameoftheimage.gif” alt=“description”>
Images Aligning Images can be done with the “align=“ tag.  Place this inside of your image source code.  You can only align to the right or to the left with this tag. <img src=“name.jpg” alt=“description” align=“right”> *Note <img….> tag is an empty tag with no </img> tag necessary
Image as a Link <a href=“url or file name”><img src = “imagefile.jpg” alt=“description”></a> Insert the img src tag in place of the clickable text on a normal link
Creating Links ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Creating  Absolute Links <a href=&quot;url&quot;>Text to be displayed</a> Anchor Tag Href attribute used to address the document to link to Where this link will take you Text hyperlink that appears in browser Closing Anchor Tag
Creating Relative Links <a href=“nameofpage.html&quot;>Text to be displayed</a> Anchor Tag href attribute used to address the document to link to Where this link will take you (page within website name Text hyperlink that appears in browser Closing Anchor Tag
Link  Tag Html Links : Html links are defined with the <a> tag Syntax :   <a href=&quot;http://www.gmil.com&quot;>Gmail</a> Example   :  <html> <body> <a href=&quot;http://www.gmail.com&quot;>Gmail</a> </body> </html> Gmail O/P : If we click this link it goes to gmail account

Weitere ähnliche Inhalte

Was ist angesagt?

Html Presentation Of Web Page Making
Html Presentation Of Web Page MakingHtml Presentation Of Web Page Making
Html Presentation Of Web Page Making
Sandeep Supal
 
Html Intro2
Html Intro2Html Intro2
Html Intro2
mlackner
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
vikasgaur31
 

Was ist angesagt? (20)

HTML & CSS
HTML & CSSHTML & CSS
HTML & CSS
 
Html
HtmlHtml
Html
 
Html Presentation Of Web Page Making
Html Presentation Of Web Page MakingHtml Presentation Of Web Page Making
Html Presentation Of Web Page Making
 
Html Intro2
Html Intro2Html Intro2
Html Intro2
 
Html ppt
Html pptHtml ppt
Html ppt
 
Html - Tutorial
Html - TutorialHtml - Tutorial
Html - Tutorial
 
HTML (Web) basics for a beginner
HTML (Web) basics for a beginnerHTML (Web) basics for a beginner
HTML (Web) basics for a beginner
 
Html ppt
Html pptHtml ppt
Html ppt
 
Html tag
Html tagHtml tag
Html tag
 
The Basics of (X)HTML Tags
The Basics of (X)HTML TagsThe Basics of (X)HTML Tags
The Basics of (X)HTML Tags
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
Cse html ppt
Cse html pptCse html ppt
Cse html ppt
 
Html Ppt
Html PptHtml Ppt
Html Ppt
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
Lecture 2 introduction to html basics
Lecture 2 introduction to html basicsLecture 2 introduction to html basics
Lecture 2 introduction to html basics
 
Html1
Html1Html1
Html1
 
Lecture 2 introduction to html
Lecture 2  introduction to htmlLecture 2  introduction to html
Lecture 2 introduction to html
 
static dynamic html tags
static dynamic html tagsstatic dynamic html tags
static dynamic html tags
 
New HTML5/CSS3 techniques
New HTML5/CSS3 techniquesNew HTML5/CSS3 techniques
New HTML5/CSS3 techniques
 
Html ppt computer
Html ppt computerHtml ppt computer
Html ppt computer
 

Ähnlich wie Intro to html

Module 2 Lesson 1
Module 2 Lesson 1Module 2 Lesson 1
Module 2 Lesson 1
claytors
 
Html part2
Html part2Html part2
Html part2
suba_sqa
 
Html part2 (1)
Html part2 (1)Html part2 (1)
Html part2 (1)
suba_sqa
 

Ähnlich wie Intro to html (20)

Html
HtmlHtml
Html
 
HTML_Slideshow1
HTML_Slideshow1HTML_Slideshow1
HTML_Slideshow1
 
HTML
HTMLHTML
HTML
 
How To Create Personal Web Pages On My Web
How To Create Personal Web Pages On My WebHow To Create Personal Web Pages On My Web
How To Create Personal Web Pages On My Web
 
Html basic
Html basicHtml basic
Html basic
 
HTML Fundamentals
HTML FundamentalsHTML Fundamentals
HTML Fundamentals
 
Web Development using HTML & CSS
Web Development using HTML & CSSWeb Development using HTML & CSS
Web Development using HTML & CSS
 
Lecture1
Lecture1Lecture1
Lecture1
 
Module 2 Lesson 1
Module 2 Lesson 1Module 2 Lesson 1
Module 2 Lesson 1
 
Html
HtmlHtml
Html
 
Web designing using html
Web designing using htmlWeb designing using html
Web designing using html
 
Html part2
Html part2Html part2
Html part2
 
Html part2 (1)
Html part2 (1)Html part2 (1)
Html part2 (1)
 
Prabu html
Prabu htmlPrabu html
Prabu html
 
Html intro
Html introHtml intro
Html intro
 
Html intro
Html introHtml intro
Html intro
 
Design Tools Html Xhtml
Design Tools Html XhtmlDesign Tools Html Xhtml
Design Tools Html Xhtml
 
Html 101
Html 101Html 101
Html 101
 
AK html
AK  htmlAK  html
AK html
 
Html For Beginners 2
Html For Beginners 2Html For Beginners 2
Html For Beginners 2
 

Kürzlich hochgeladen

Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
 

Kürzlich hochgeladen (20)

TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 

Intro to html

  • 1. Intro to HTML The Basics
  • 2. HTML HTML means Hyper Text Markup Language . HTML is a language that helps us to create web sites in the Internet . HTML helps to coordinate human and the computer . So we have to use some codes to explain to computer what are we going to do. Therefore we use HTML to give instructions to create web sites.
  • 3. Why We Learn HTML?
  • 4. Tim Berners-Lee ( CERN physicist) Creator of HTML & WWW CERN is an European Organization for Nuclear Research at Geneva
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 13. Basic Tags <html></html> Creates an HTML document <head></head> Sets off the title and other information that isn't displayed on the Web page itself <body></body> Sets off the visible portion of the document
  • 14. Header Tags <title></title> Puts the name of the document in the title bar Things in the header section do not appear in the browser
  • 15. Body Attributes <body bgcolor=?> Sets the background color, using name or hex value <body text=?> Sets the text color, using name or hex value <body background=url> Specifies an image file to be used as background <body vlink=?> Sets the color of followed links, using name or hex value <body alink=?> Sets the color of links on click
  • 16. Text Formatting Tags 1 <hl></hl> Creates the largest header <h6></h6> Creates the smallest header <b></b> Creates bold text <i></i> Creates italic text
  • 17. Text Formatting Tags 2 <strong></strong> Emphasizes a word (with italic or bold) <font size=“?”></font> Sets size of font <font color=“?”></font> Sets font color, using name or hex value <font face=“?”></font> Set font style like Comic Sans MS
  • 18. Paragraph Formatting Tags <p></p> Creates a new paragraph <p align=?> Aligns a paragraph to the left, right, or center <br> Inserts a line break <blockquote></blockquote> Indents text from both sides
  • 19.
  • 20.
  • 21.
  • 22.
  • 23. How Tables Work <tr> </tr> <table> </table> <td> </td> <td> </td> </td> <td> <tr> </tr> <td> </td> <td> </td> </td> <td> <tr> </tr> <td> </td> <td> </td> </td> <td>
  • 24. Images Img = image src = source of the image alt = stands for alternate and is used to name the image, important for visually impaired users (text to speech) <img src =“nameoftheimage.jpg” alt=“description”> <img src =“nameoftheimage.gif” alt=“description”>
  • 25. Images Aligning Images can be done with the “align=“ tag. Place this inside of your image source code. You can only align to the right or to the left with this tag. <img src=“name.jpg” alt=“description” align=“right”> *Note <img….> tag is an empty tag with no </img> tag necessary
  • 26. Image as a Link <a href=“url or file name”><img src = “imagefile.jpg” alt=“description”></a> Insert the img src tag in place of the clickable text on a normal link
  • 27.
  • 28. Creating Absolute Links <a href=&quot;url&quot;>Text to be displayed</a> Anchor Tag Href attribute used to address the document to link to Where this link will take you Text hyperlink that appears in browser Closing Anchor Tag
  • 29. Creating Relative Links <a href=“nameofpage.html&quot;>Text to be displayed</a> Anchor Tag href attribute used to address the document to link to Where this link will take you (page within website name Text hyperlink that appears in browser Closing Anchor Tag
  • 30. Link Tag Html Links : Html links are defined with the <a> tag Syntax : <a href=&quot;http://www.gmil.com&quot;>Gmail</a> Example : <html> <body> <a href=&quot;http://www.gmail.com&quot;>Gmail</a> </body> </html> Gmail O/P : If we click this link it goes to gmail account