SlideShare uma empresa Scribd logo
1 de 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

Mais conteúdo relacionado

Mais procurados

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
 

Mais procurados (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
 

Semelhante a 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
 

Semelhante a 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
 

Último

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Último (20)

Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
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
 
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
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 

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