SlideShare una empresa de Scribd logo
1 de 12
Creating a basic webpage Michael Martin’s guide to
10 Step’s to Success! 1. Open the notepad program.
10 Step’s to Success! 2. Create a new folder called, Basic Webpage. Go to File, then Save As. Name it: index.html. Be sure to select “All Files” under Save as type. Save this in the folder we just created.
10 Step’s to Success! 3. Copy the text below to start your new page.
10 Step’s to Success! For this webpage, we will be using embedded styles which are:  A CSS or cascading style sheets style that is written in the head of the XHTML document. It affects only the elements on that page.  There are also external and inline styles. External are coded in a separate text file and inline are coded in body of the page.
10 Step’s to Success! 4. Copy below the embedded styles code and also, let’s add a title “My Basic Webpage” between the title tags in the header.  A header is:  The  beginning part of an  HTML document which  defines various characteristics such  as the title.
10 Step’s to Success! 5. Let’s come back to the embedded CSS in a minute, and let’s create our Heading. Type in the body: <h1>My First Basic Webpage</h1>  Open browser to view!
10 Step’s to Success! 6. Want to create a paragraph? Let’s do it!  Type the following:  <p>This is my <strong>first</strong> paragraph!</p> Notice the <strong>? This bolds the text. Refresh the browser to see what we just did.
10 Step’s to Success! 7. Back to the embedded style sheet. Let’s give our page a different look. Add below: Body {background-color: #000000;               color: #ffffff; } This turns the text  White and background To black.
10 Step’s to Success! 8. Look at that, it didn’t even take 10 full steps to create a webpage, but don’t worry the last two slides have information you will need!
10 Step’s to Success! 9. Important Terms:  Body: the main part of an HTML document XHTML: the newest version of HTML HTML: stands for hyper text markup language URL: stands for uniform resource locator W3C: stands for World Wide Web Consortium JPG: has millions of colors GIF: has 256 colors Remember these terms, you might need them!
10 Step’s to Success! 10. Good Job completing your first basic webpage!  Below are some links you may find useful in the future:  www.w3schools.com  http://jigsaw.w3.org/ http://validator.w3.org/

Más contenido relacionado

La actualidad más candente

Coding a Website with HTML
Coding a Website with HTMLCoding a Website with HTML
Coding a Website with HTML
wrhsbusiness
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
chowders
 

La actualidad más candente (20)

Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
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 introduction by ikram niaz
Html introduction by ikram niazHtml introduction by ikram niaz
Html introduction by ikram niaz
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
Basic html structure
Basic html structureBasic html structure
Basic html structure
 
Html introduction
Html introductionHtml introduction
Html introduction
 
Coding a Website with HTML
Coding a Website with HTMLCoding a Website with HTML
Coding a Website with HTML
 
HTML email design and usability
HTML email design and usabilityHTML email design and usability
HTML email design and usability
 
46h interaction 1.lesson Hello world
46h interaction 1.lesson Hello world46h interaction 1.lesson Hello world
46h interaction 1.lesson Hello world
 
Html
HtmlHtml
Html
 
Web design - HTML (Hypertext Markup Language) introduction
Web design - HTML (Hypertext Markup Language) introductionWeb design - HTML (Hypertext Markup Language) introduction
Web design - HTML (Hypertext Markup Language) introduction
 
Html
HtmlHtml
Html
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
[Basic HTML/CSS] 0. introduction
[Basic HTML/CSS] 0. introduction[Basic HTML/CSS] 0. introduction
[Basic HTML/CSS] 0. introduction
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
HTML Lesson 1
HTML Lesson 1HTML Lesson 1
HTML Lesson 1
 
HTML Introduction, HTML History, HTML Uses, HTML benifits
HTML Introduction, HTML History, HTML Uses, HTML benifitsHTML Introduction, HTML History, HTML Uses, HTML benifits
HTML Introduction, HTML History, HTML Uses, HTML benifits
 
Web designing using html
Web designing using htmlWeb designing using html
Web designing using html
 

Similar a Basic Webpage

HTML Intermediate
HTML IntermediateHTML Intermediate
HTML Intermediate
c525600
 
HTML Advanced
HTML AdvancedHTML Advanced
HTML Advanced
c525600
 
Web pageassignment
Web pageassignmentWeb pageassignment
Web pageassignment
beachtch
 
HTML introduction
HTML introduction HTML introduction
HTML introduction
Wael Badawy
 
HTML Lesson 1
HTML Lesson 1HTML Lesson 1
HTML Lesson 1
TonyC445
 
HTML Lab ProjectTo create a simple web page you will need .docx
HTML Lab ProjectTo create a simple web page you will need .docxHTML Lab ProjectTo create a simple web page you will need .docx
HTML Lab ProjectTo create a simple web page you will need .docx
adampcarr67227
 
Lesson 108 23 aug13-1430-ay
Lesson 108 23 aug13-1430-ayLesson 108 23 aug13-1430-ay
Lesson 108 23 aug13-1430-ay
Codecademy Ren
 
1 Creating web pages in Word (Web Assignment 1) .docx
1  Creating web pages in Word  (Web Assignment 1)  .docx1  Creating web pages in Word  (Web Assignment 1)  .docx
1 Creating web pages in Word (Web Assignment 1) .docx
honey725342
 

Similar a Basic Webpage (20)

HTML Intermediate
HTML IntermediateHTML Intermediate
HTML Intermediate
 
BP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog Template
BP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog TemplateBP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog Template
BP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog Template
 
Master page
Master pageMaster page
Master page
 
HTML Advanced
HTML AdvancedHTML Advanced
HTML Advanced
 
Html Tutorial
Html Tutorial Html Tutorial
Html Tutorial
 
Proven ways to place a website under construction in cPanel.pdf
Proven ways to place a website under construction in cPanel.pdfProven ways to place a website under construction in cPanel.pdf
Proven ways to place a website under construction in cPanel.pdf
 
HTML 101
HTML 101HTML 101
HTML 101
 
Lesson plan htmltextformattingtag
Lesson plan htmltextformattingtagLesson plan htmltextformattingtag
Lesson plan htmltextformattingtag
 
Web pageassignment
Web pageassignmentWeb pageassignment
Web pageassignment
 
How to Create a Simple Webpage Using Notepad.pptx
How to Create a Simple Webpage Using Notepad.pptxHow to Create a Simple Webpage Using Notepad.pptx
How to Create a Simple Webpage Using Notepad.pptx
 
Lesson plan: HTML Formatting Texts and Paragraphs
Lesson plan: HTML Formatting Texts and ParagraphsLesson plan: HTML Formatting Texts and Paragraphs
Lesson plan: HTML Formatting Texts and Paragraphs
 
HTML 101r
HTML 101rHTML 101r
HTML 101r
 
Web htmlt1
Web   htmlt1Web   htmlt1
Web htmlt1
 
HTML introduction
HTML introduction HTML introduction
HTML introduction
 
Basic HTML Tutorial For Beginners
Basic HTML Tutorial For BeginnersBasic HTML Tutorial For Beginners
Basic HTML Tutorial For Beginners
 
HTML Lesson 1
HTML Lesson 1HTML Lesson 1
HTML Lesson 1
 
HTML Lab ProjectTo create a simple web page you will need .docx
HTML Lab ProjectTo create a simple web page you will need .docxHTML Lab ProjectTo create a simple web page you will need .docx
HTML Lab ProjectTo create a simple web page you will need .docx
 
Lesson 108 23 aug13-1430-ay
Lesson 108 23 aug13-1430-ayLesson 108 23 aug13-1430-ay
Lesson 108 23 aug13-1430-ay
 
Html basics
Html basicsHtml basics
Html basics
 
1 Creating web pages in Word (Web Assignment 1) .docx
1  Creating web pages in Word  (Web Assignment 1)  .docx1  Creating web pages in Word  (Web Assignment 1)  .docx
1 Creating web pages in Word (Web Assignment 1) .docx
 

Último

Salient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsSalient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functions
KarakKing
 

Último (20)

TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.ppt
 
Plant propagation: Sexual and Asexual propapagation.pptx
Plant propagation: Sexual and Asexual propapagation.pptxPlant propagation: Sexual and Asexual propapagation.pptx
Plant propagation: Sexual and Asexual propapagation.pptx
 
Fostering Friendships - Enhancing Social Bonds in the Classroom
Fostering Friendships - Enhancing Social Bonds  in the ClassroomFostering Friendships - Enhancing Social Bonds  in the Classroom
Fostering Friendships - Enhancing Social Bonds in the Classroom
 
How to Add New Custom Addons Path in Odoo 17
How to Add New Custom Addons Path in Odoo 17How to Add New Custom Addons Path in Odoo 17
How to Add New Custom Addons Path in Odoo 17
 
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdf
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdfUnit 3 Emotional Intelligence and Spiritual Intelligence.pdf
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdf
 
Google Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxGoogle Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptx
 
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptxExploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
 
Python Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxPython Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docx
 
Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024
 
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxBasic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
 
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
 
Towards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptxTowards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptx
 
Interdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptxInterdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptx
 
Graduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - EnglishGraduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - English
 
Salient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsSalient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functions
 
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
 
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptxHMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
 
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptxHMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
 
How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17
 

Basic Webpage

  • 1. Creating a basic webpage Michael Martin’s guide to
  • 2. 10 Step’s to Success! 1. Open the notepad program.
  • 3. 10 Step’s to Success! 2. Create a new folder called, Basic Webpage. Go to File, then Save As. Name it: index.html. Be sure to select “All Files” under Save as type. Save this in the folder we just created.
  • 4. 10 Step’s to Success! 3. Copy the text below to start your new page.
  • 5. 10 Step’s to Success! For this webpage, we will be using embedded styles which are:  A CSS or cascading style sheets style that is written in the head of the XHTML document. It affects only the elements on that page. There are also external and inline styles. External are coded in a separate text file and inline are coded in body of the page.
  • 6. 10 Step’s to Success! 4. Copy below the embedded styles code and also, let’s add a title “My Basic Webpage” between the title tags in the header. A header is: The beginning part of an HTML document which defines various characteristics such as the title.
  • 7. 10 Step’s to Success! 5. Let’s come back to the embedded CSS in a minute, and let’s create our Heading. Type in the body: <h1>My First Basic Webpage</h1> Open browser to view!
  • 8. 10 Step’s to Success! 6. Want to create a paragraph? Let’s do it! Type the following: <p>This is my <strong>first</strong> paragraph!</p> Notice the <strong>? This bolds the text. Refresh the browser to see what we just did.
  • 9. 10 Step’s to Success! 7. Back to the embedded style sheet. Let’s give our page a different look. Add below: Body {background-color: #000000; color: #ffffff; } This turns the text White and background To black.
  • 10. 10 Step’s to Success! 8. Look at that, it didn’t even take 10 full steps to create a webpage, but don’t worry the last two slides have information you will need!
  • 11. 10 Step’s to Success! 9. Important Terms: Body: the main part of an HTML document XHTML: the newest version of HTML HTML: stands for hyper text markup language URL: stands for uniform resource locator W3C: stands for World Wide Web Consortium JPG: has millions of colors GIF: has 256 colors Remember these terms, you might need them!
  • 12. 10 Step’s to Success! 10. Good Job completing your first basic webpage! Below are some links you may find useful in the future: www.w3schools.com http://jigsaw.w3.org/ http://validator.w3.org/