SlideShare ist ein Scribd-Unternehmen logo
1 von 12
LESSON 1 Module 2: HTML Basics Basic HTML
Lesson Overview In this lesson, you will learn to: ,[object Object]
View Web pages created with HTML code.
Create a comment within an HTML document.
Format text within a Web page.
Creates tags with attributes.,[object Object]
What tools are needed to create a Web page or site?
How is a Web page viewed from the browser?,[object Object]
H	Hyper
T	Text
M	Markup
L	Language,[object Object],[object Object],[object Object]

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Lesson plan htmltextformattingtag
Lesson plan htmltextformattingtagLesson plan htmltextformattingtag
Lesson plan htmltextformattingtag
 
Web design 2 - Basic HTML 2010
Web design 2 - Basic HTML 2010Web design 2 - Basic HTML 2010
Web design 2 - Basic HTML 2010
 
HTML Intermediate
HTML IntermediateHTML Intermediate
HTML Intermediate
 
How an html file is structured
How an html file is structuredHow an html file is structured
How an html file is structured
 
HTML Advanced
HTML AdvancedHTML Advanced
HTML Advanced
 
Lesson plan 3
Lesson plan 3Lesson plan 3
Lesson plan 3
 
HTML 101
HTML 101HTML 101
HTML 101
 
YL Intro html
YL Intro htmlYL Intro html
YL Intro html
 
Creating A Forensics Webpage
Creating A Forensics WebpageCreating A Forensics Webpage
Creating A Forensics Webpage
 
HTML
HTMLHTML
HTML
 
Basic Html for beginners.
Basic Html for beginners.Basic Html for beginners.
Basic Html for beginners.
 
Basic html
Basic htmlBasic html
Basic html
 
Lecture2 CSS 2
Lecture2  CSS 2Lecture2  CSS 2
Lecture2 CSS 2
 
HTML 101r
HTML 101rHTML 101r
HTML 101r
 
Html guide
Html guideHtml guide
Html guide
 
Html - Tutorial
Html - TutorialHtml - Tutorial
Html - Tutorial
 
Hypertext markup language (html)
Hypertext markup language (html)Hypertext markup language (html)
Hypertext markup language (html)
 
Lecture 9 Professional Practices
Lecture 9 Professional PracticesLecture 9 Professional Practices
Lecture 9 Professional Practices
 
How To Become A Web Page Master Builder
How To Become A Web Page Master BuilderHow To Become A Web Page Master Builder
How To Become A Web Page Master Builder
 
Unit 2.2 Part 1
Unit 2.2 Part 1Unit 2.2 Part 1
Unit 2.2 Part 1
 

Andere mochten auch

Public relations in marketing communication
Public relations in marketing communicationPublic relations in marketing communication
Public relations in marketing communicationMeraPPT. com
 
Rows and Columns
Rows and ColumnsRows and Columns
Rows and Columnscoachhahn
 
Illustrations
IllustrationsIllustrations
Illustrationscoachhahn
 
T.2.2.pp(new)
T.2.2.pp(new)T.2.2.pp(new)
T.2.2.pp(new)coachhahn
 
Format and Modify Text and Display and Print Formulas
Format and Modify Text and Display and Print FormulasFormat and Modify Text and Display and Print Formulas
Format and Modify Text and Display and Print Formulascoachhahn
 
Communications & Networks
Communications & NetworksCommunications & Networks
Communications & Networkscoachhahn
 
Communications & Networks
Communications & NetworksCommunications & Networks
Communications & Networkscoachhahn
 
Search tools
Search toolsSearch tools
Search toolscoachhahn
 
The Elements of Design - Color
The Elements of Design - ColorThe Elements of Design - Color
The Elements of Design - Colorcoachhahn
 
Excel Objective 1: Creating and Manipulating Data
Excel Objective 1: Creating and Manipulating DataExcel Objective 1: Creating and Manipulating Data
Excel Objective 1: Creating and Manipulating Datacoachhahn
 
Marketing ethics & social responsibilities
Marketing ethics & social responsibilitiesMarketing ethics & social responsibilities
Marketing ethics & social responsibilitiesMeraPPT. com
 
Service sectors ppt
Service sectors pptService sectors ppt
Service sectors pptMeraPPT. com
 

Andere mochten auch (15)

Logos
LogosLogos
Logos
 
Banners
BannersBanners
Banners
 
Public relations in marketing communication
Public relations in marketing communicationPublic relations in marketing communication
Public relations in marketing communication
 
Rows and Columns
Rows and ColumnsRows and Columns
Rows and Columns
 
Germany
GermanyGermany
Germany
 
Illustrations
IllustrationsIllustrations
Illustrations
 
T.2.2.pp(new)
T.2.2.pp(new)T.2.2.pp(new)
T.2.2.pp(new)
 
Format and Modify Text and Display and Print Formulas
Format and Modify Text and Display and Print FormulasFormat and Modify Text and Display and Print Formulas
Format and Modify Text and Display and Print Formulas
 
Communications & Networks
Communications & NetworksCommunications & Networks
Communications & Networks
 
Communications & Networks
Communications & NetworksCommunications & Networks
Communications & Networks
 
Search tools
Search toolsSearch tools
Search tools
 
The Elements of Design - Color
The Elements of Design - ColorThe Elements of Design - Color
The Elements of Design - Color
 
Excel Objective 1: Creating and Manipulating Data
Excel Objective 1: Creating and Manipulating DataExcel Objective 1: Creating and Manipulating Data
Excel Objective 1: Creating and Manipulating Data
 
Marketing ethics & social responsibilities
Marketing ethics & social responsibilitiesMarketing ethics & social responsibilities
Marketing ethics & social responsibilities
 
Service sectors ppt
Service sectors pptService sectors ppt
Service sectors ppt
 

Ähnlich wie Basic HTML (20)

Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
Html
HtmlHtml
Html
 
Creating a page in HTML
Creating a page in HTMLCreating a page in HTML
Creating a page in HTML
 
Let me design
Let me designLet me design
Let me design
 
Html
HtmlHtml
Html
 
Web designing using html
Web designing using htmlWeb designing using html
Web designing using html
 
Intro to html
Intro to htmlIntro to html
Intro to html
 
Intro to html
Intro to htmlIntro to html
Intro to html
 
Tutorial 08 - Creating Effective Web Pages
Tutorial 08 - Creating Effective Web PagesTutorial 08 - Creating Effective Web Pages
Tutorial 08 - Creating Effective Web Pages
 
Tutorial 08 - Creating Effective Web Pages
Tutorial 08 - Creating Effective Web PagesTutorial 08 - Creating Effective Web Pages
Tutorial 08 - Creating Effective Web Pages
 
html.pptx
html.pptxhtml.pptx
html.pptx
 
Html tutorial
Html tutorialHtml tutorial
Html tutorial
 
Html tutorial
Html tutorialHtml tutorial
Html tutorial
 
Html tutorial
Html tutorialHtml tutorial
Html tutorial
 
Html basic
Html basicHtml basic
Html basic
 
Html basics
Html basicsHtml basics
Html basics
 
Html basics
Html basicsHtml basics
Html basics
 
Html basics
Html basicsHtml basics
Html basics
 
Html basic file
Html basic fileHtml basic file
Html basic file
 
Html basics
Html basicsHtml basics
Html basics
 

Mehr von coachhahn

THe Evolution of Web Design
THe Evolution of Web DesignTHe Evolution of Web Design
THe Evolution of Web Designcoachhahn
 
Formatting Charts
Formatting ChartsFormatting Charts
Formatting Chartscoachhahn
 
Creating and Modifying Charts
Creating and Modifying ChartsCreating and Modifying Charts
Creating and Modifying Chartscoachhahn
 
Communications and Networks
Communications and NetworksCommunications and Networks
Communications and Networkscoachhahn
 
Summarize Data Using a Formula
Summarize Data Using a FormulaSummarize Data Using a Formula
Summarize Data Using a Formulacoachhahn
 
Reference Data in Formulas
Reference Data in FormulasReference Data in Formulas
Reference Data in Formulascoachhahn
 
Impact of Images
Impact of ImagesImpact of Images
Impact of Imagescoachhahn
 
Format as a Table
Format as a TableFormat as a Table
Format as a Tablecoachhahn
 
Repetition and Unity
Repetition and UnityRepetition and Unity
Repetition and Unitycoachhahn
 
Formatting Cells
Formatting CellsFormatting Cells
Formatting Cellscoachhahn
 
Balance & Proximity
Balance & ProximityBalance & Proximity
Balance & Proximitycoachhahn
 
Formatting Worksheets
Formatting WorksheetsFormatting Worksheets
Formatting Worksheetscoachhahn
 
The Elements of Design - Texture and Typography
The Elements of Design - Texture and TypographyThe Elements of Design - Texture and Typography
The Elements of Design - Texture and Typographycoachhahn
 
Shape and line
Shape and lineShape and line
Shape and linecoachhahn
 
Lesson 2 - More Basic HTML
Lesson 2 - More Basic HTMLLesson 2 - More Basic HTML
Lesson 2 - More Basic HTMLcoachhahn
 
Lesson 2 - More Basic HTML
Lesson 2 - More Basic HTMLLesson 2 - More Basic HTML
Lesson 2 - More Basic HTMLcoachhahn
 

Mehr von coachhahn (18)

THe Evolution of Web Design
THe Evolution of Web DesignTHe Evolution of Web Design
THe Evolution of Web Design
 
Formatting Charts
Formatting ChartsFormatting Charts
Formatting Charts
 
Creating and Modifying Charts
Creating and Modifying ChartsCreating and Modifying Charts
Creating and Modifying Charts
 
Communications and Networks
Communications and NetworksCommunications and Networks
Communications and Networks
 
Summarize Data Using a Formula
Summarize Data Using a FormulaSummarize Data Using a Formula
Summarize Data Using a Formula
 
Reference Data in Formulas
Reference Data in FormulasReference Data in Formulas
Reference Data in Formulas
 
Impact of Images
Impact of ImagesImpact of Images
Impact of Images
 
Format as a Table
Format as a TableFormat as a Table
Format as a Table
 
Repetition and Unity
Repetition and UnityRepetition and Unity
Repetition and Unity
 
Formatting Cells
Formatting CellsFormatting Cells
Formatting Cells
 
Balance & Proximity
Balance & ProximityBalance & Proximity
Balance & Proximity
 
Movement
MovementMovement
Movement
 
Formatting Worksheets
Formatting WorksheetsFormatting Worksheets
Formatting Worksheets
 
The Elements of Design - Texture and Typography
The Elements of Design - Texture and TypographyThe Elements of Design - Texture and Typography
The Elements of Design - Texture and Typography
 
Shape and line
Shape and lineShape and line
Shape and line
 
T.2.8.pp
T.2.8.ppT.2.8.pp
T.2.8.pp
 
Lesson 2 - More Basic HTML
Lesson 2 - More Basic HTMLLesson 2 - More Basic HTML
Lesson 2 - More Basic HTML
 
Lesson 2 - More Basic HTML
Lesson 2 - More Basic HTMLLesson 2 - More Basic HTML
Lesson 2 - More Basic HTML
 

Kürzlich hochgeladen

Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)eniolaolutunde
 
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...christianmathematics
 
APM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across SectorsAPM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across SectorsAssociation for Project Management
 
Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Celine George
 
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...PsychoTech Services
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104misteraugie
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdfQucHHunhnh
 
Z Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphZ Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphThiyagu K
 
Q4-W6-Restating Informational Text Grade 3
Q4-W6-Restating Informational Text Grade 3Q4-W6-Restating Informational Text Grade 3
Q4-W6-Restating Informational Text Grade 3JemimahLaneBuaron
 
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...fonyou31
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfagholdier
 
Measures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SDMeasures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SDThiyagu K
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introductionMaksud Ahmed
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfAdmir Softic
 
Sanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdfSanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdfsanyamsingh5019
 
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...EduSkills OECD
 
A Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformA Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformChameera Dedduwage
 
Accessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactAccessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactdawncurless
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxheathfieldcps1
 

Kürzlich hochgeladen (20)

Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)
 
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
 
APM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across SectorsAPM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across Sectors
 
Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17
 
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
 
Z Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphZ Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot Graph
 
Q4-W6-Restating Informational Text Grade 3
Q4-W6-Restating Informational Text Grade 3Q4-W6-Restating Informational Text Grade 3
Q4-W6-Restating Informational Text Grade 3
 
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdf
 
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptxINDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
 
Measures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SDMeasures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SD
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introduction
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdf
 
Sanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdfSanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdf
 
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
 
A Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformA Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy Reform
 
Accessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactAccessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impact
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptx
 

Basic HTML

Hinweis der Redaktion

  1. Lesson 1 Overview
  2. Post one or more of these questions in an area where students can read them and allow time for students to respond to the questions. Discuss the student answers these questions.
  3. Review the definition of HTML with students from the text and describe that the tools needed to create a Web page or site can be as simple as a text editor application to a more complex Web design application. Explain to the students that we will be using a very simplistic word processing application called “Notepad” to create our first Web pages with HTML.
  4. Web pages are viewed using a Web browser. The current most popular Web browsers include Internet Explorer, Mozilla Firefox, Netscape Navigator, and Apple Safari. Discuss the fact that an individual Web page may appear differently when viewed in each of these Web browsers due to the way that each browser renders the page.
  5. Once students have copied the code into their word processing document, have them save the document as “tags.html.” The extension .html will identify this file as one to be opened by a Web site browser. Once the students have the file saved, ask them to go to the file on their computer (or other location where the file is saved) and open it.
  6. Discuss that tags tell the browser how to display text and ask students to identify how they think the following examples of text would be displayed by a browser. (Note: For purposes of practicing the concepts of tags and for creating a few beginner Web pages, this text includes a few elements that were commonly used in earlier versions of HTML, but no longer meet the most recent HTML standards. Elements no longer supported by the most current version of HTML are referred to as “deprecated.” We will note these deprecations where they appear.)<b>How would this text look different?</b> bolded text (deprecated)<strong>Does this look any different?</strong> strong or bolded text<i>How would this text be displayed?</i> italicized text (deprecated)<em>Same as italicized?</em> italicized text<u>This tag might be useful for titles.</u> underlined text<body text=red>How would this tag change things?</body> text color would be redIf students are struggling with identifying the effect of each tag, have them add the code to their document so that they can visually see the differences.
  7. Discuss that text can also be altered in its size. The use of a height tag will alter the size of the text.
  8. Discuss that a browser ignores the use of the “enter” key. The extra space in our example did not show in the Web browser. Explain that the use of a break tag <br> will place text on the next line. Explain that no ending tag is needed. How students place a break tag after the phrase “easy to learn and use.” Now ask student to view their html document again. (Note: This would be a good time to explain the use of the refresh button for viewing a Web page.)
  9. Discuss the difference between a “break” tag and a “paragraph” tag. A break tag places the following text on the next line. A paragraph tag places the text in a block, thus creating a paragraph. Ask students to remove the break tag they just created and place a beginning paragraph tag <p> right after the body tag <body> and place a closing paragraph tag </p> after the phrase “easy to learn and use.” Have students refresh their Web page to see the result.
  10. Discuss the process of creating a comment. Ask students why someone creating a Web page would want to use a comment. Explain that comments are created using the following coding and are not displayed when viewing a Web page. <!--This is an example of a comment.-->
  11. Review concepts covered if needed with the students and discuss the practice activity.