Presentation is loading. Please wait.

Presentation is loading. Please wait.

Let’s Try It! Open Notepad

Published byCollin Marsh Modified over 7 years ago

Similar presentations

Presentation on theme: "Let’s Try It! Open Notepad"— Presentation transcript:

1 Let’s Try It! Open Notepad
Online PD Basic HTML 12/22/2017 Let’s Try It! Open Notepad Start > All Programs > Accessories > Notepad Don’t get WordPad by mistake – won’t work the same Revised June 2008 Online PD Basic HTML DMasonDesigns

2 This is the number 1, not a small “L”
Online PD Basic HTML 12/22/2017 Typing in Notepad Type the following tags in Notepad: (don’t forget the brackets!) <HTML> <HEAD> <TITLE>My First Web Page</TITLE> </HEAD> <BODY> <BR>This is my very first web page. <BR>My name is Debi Mason. (but put your name!) </BODY> </HTML> Save this page and name it “practice1.html” BE SURE to add the file extension ‘.html’ or it won’t show as a web page. Now just minimize this file because you will use it again later. NOTE: “practice1.htm” This is the number 1, not a small “L” Revised June 2008 Online PD Basic HTML DMasonDesigns

3 Viewing Your “practice1.html” Page
Online PD Basic HTML 12/22/2017 Viewing Your “practice1.html” Page Once your practice file is saved, you can view it in Internet Explorer or Chrome, etc so just click the icon. File > Open > Browse to your practice1.html file > OK Your file should now show in your internet window. If it does not, check your coding. This is called debugging! Check it Out! If your page is not like that, view the codes very carefully! Revised June 2008 Online PD Basic HTML DMasonDesigns

4 Online PD Basic HTML 12/22/2017 “practice1.htm” File If yours does not look like mine, correct your code as necessary: Open the file in Notepad again. Make the corrections (called “debugging” code!) File > Save Look at the file in Internet Explorer again (if you did not close out the file, you simply have to click on “Refresh” to force the browser to re-read the file and show your changes!) Keep working and debugging your code until it is correct. Revised June 2008 Online PD Basic HTML DMasonDesigns

5 Online PD Basic HTML Bold, Italics, and Underlining
12/22/2017 Formatting Text Bold, Italics, and Underlining DMasonDesigns

6 practice2.htm Under your line with your name, add:
Online PD Basic HTML 12/22/2017 practice2.htm Under your line with your name, add: This is a practice sentence to make the text bold. and make the word “bold” ,well…, bold. <B>bold.</B> You may need to refer to the Sample Web Page to see examples. Now do the same with This is a practice sentence to make the text italics. and make “italics” in italics. <I>italics.</I> Now type This a practice sentence to make the text underlined. <U>underlined</U> Revised June 2008 Online PD Basic HTML DMasonDesigns

7 practice2.html – slide 2 So, you have added four new lines of text.
Online PD Basic HTML 12/22/2017 practice2.html – slide 2 So, you have added four new lines of text. Be sure to add the <BR> tag to the beginning of each sentence – makes the line of text “push” to the next line! File > Save and look at your web page again! Revised June 2008 Online PD Basic HTML DMasonDesigns

8 Online PD Basic HTML 12/22/2017 Multiple Tags If you want to add multiple effects to a line of text, you may do so, but adding the end tags takes some thought! Now type: <BR><B><I><U> This is another practice sentence! </U></I></B> Save and Check it out! Revised June 2008 Online PD Basic HTML DMasonDesigns

9 Adding Color Backgrounds
Online PD Basic HTML 12/22/2017 Adding Color Backgrounds Now let’s discuss page backgrounds. To add a color background to your page, you will add a ”bgcolor” attribute to your BODY tag. <BODY bgcolor=“yellow”> This will make your page all yellow behind the other elements. Use a color of your choice, but dark is usually not a good idea. If your text “disappears”, you probably made your background and your text color the same! Revised June 2008 Online PD Basic HTML DMasonDesigns

10 Online PD Basic HTML 12/22/2017 Background Color Add the attribute bgcolor=“yellow” into your body tag (insert the curser between the “Y” and the bracket, make a space, type in the attribute and value) Save, Refresh, & View!! Debug if necessary. Revised August 2008 Online PD Basic HTML DMasonDesigns

11 Headings <H1>This is the H1 tag in use.</H1>
Online PD Basic HTML 12/22/2017 Headings <H1> is the largest text the viewer’s browser can display, while <H6> is the smallest. Heading tags also add some “white” space (or empty space) above and below the text to separate it for emphasis from the rest of the text. Type the following information after your last sentence added: <H1>This is the H1 tag in use.</H1> <H2>This is the H2 tag in use.</H2> <H3>This is the H3 tag in use.</H3> <H4>This is the H4 tag in use.</H4> <H5>This is the H5 tag in use.</H5> <H6>This is the H6 tag in use.</H6> Don’t add anything after the </BODY> or </HTML> tags – those should always be the last tags on your page! Revised June 2008 Online PD Basic HTML DMasonDesigns

12 Text Sizes Now, we’ll add some text size tags. Add these sentences below the Heading sentences. <P><FONT size="6">This is font size 6</FONT> <P><FONT size="5">This is font size 5</FONT> <P><FONT size="4">This is font size 4</FONT> <P><FONT size="3">This is font size 3 (This is the default font size of most Web browsers.) </FONT> <P><FONT size="2">This is font size 2</FONT> <P><FONT size="1">This is font size 1</FONT> The <P> tag double spaces! Revised August 2008 Online PD Basic HTML

13 Online PD Basic HTML 12/22/2017 Attributes of a Tag Some tags may include an attribute, or additional information about the text within the tags Attributes are included in the start tag, not the end, or close, tag For example, <BODY bgcolor= “yellow”> The tag is BODY while the attribute is bgcolor=“…” Notice the attribute is inside the brackets with the tag, and the value of the attribute is enclosed in quotes. Revised June 2008 Online PD Basic HTML DMasonDesigns

14 Online PD Basic HTML 12/22/2017 All Text Same Color text=“blue” is an attribute of the BODY tag if you want all text on the page to be the same color (besides black, the default color.) In the BODY tag, add the attribute text=“blue”, so your tag should look like: <BODY bgcolor=“yellow” text=“blue”> Your background color will still be yellow, but your text will be blue. Save and Check It Out! Revised June 2008 Online PD Basic HTML DMasonDesigns

15 Online PD Basic HTML 12/22/2017 Spot Color If you want to emphasize just part of your text by adding color to specific words or sentences, add the <FONT> tag with a color attribute: <FONT color=“green”> This one does have to close, so when you want green text to end, just close the tag, not the attribute. </FONT> For emphasis, just before your heading sentences, add the FONT tag and change the text to green. BE SURE to turn it off after the last heading sentence. Then make the text size sentences orange. Be sure to turn off! Save and Check It Out! Revised June 2008 Online PD Basic HTML DMasonDesigns

16 Online PD Basic HTML 12/22/2017 Text Alignment The header tags can contain an attribute to align the header text where you want it. Let’s give our Web page a title and center it. Add a blank line under the <BODY> tag at the top of the page, and type <H1 align=“center”>My First Web Page</H1> Save and Check It Out! Revised June 2008 Online PD Basic HTML DMasonDesigns

17 Centering Blocks of Text
Online PD Basic HTML 12/22/2017 Centering Blocks of Text You can also choose to center paragraphs or blocks of text. Simply add the tag <CENTER> where you want to start centering everything on the page. Then add the close tag </CENTER> where you want to stop centering “stuff!” Let’s center the heading sentences in our practice page Save and Check It Out! Revised June 2008 Online PD Basic HTML DMasonDesigns

18 Adding Images to Web Pages
Online PD Basic HTML 12/22/2017 Adding Images to Web Pages DMasonDesigns

19 Online PD Basic HTML 12/22/2017 Saving An Image Adding an image adds interest to a Web page. But, your image files MUST be saved in the same folder where your html document is saved. Choose a meaningful name! NO SPACES in the file name! Go to Google Images and choose an appropriate picture. It needs to be a JPG and the bigger the better! To save the picture: right-click, Save As, navigate to your I:Drive and Save in your HTML folder (NO SPACES!) Revised June 2008 Online PD Basic HTML DMasonDesigns

20 Adding An Image Tag Let’s add the image right up under our page title.
Online PD Basic HTML 12/22/2017 Adding An Image Tag Let’s add the image right up under our page title. Make yourself an empty line or two after the </H1> tag. Add the tag <IMG src=“picture.jpg” > and add a center tag before it and after it so the image is centered. Be sure you copy your image name EXACTLY as you saved it (instead of picture.jpg like I used – use the quotes, though.) Also notice the image tag does not need a close tag. Save and Check It Out! Revised June 2008 Online PD Basic HTML DMasonDesigns

21 Adding Hyperlinks to Web Pages
Online PD Basic HTML 12/22/2017 Adding Hyperlinks to Web Pages DMasonDesigns

22 Online PD Basic HTML 12/22/2017 Adding A Hyperlink Hyperlinks are what make the Internet the Internet! A hyperlink is a tag used to put text on your web page that links to other web pages. We will use Google as an example. Let’s add a tag before the heading sentences to link to Google. Be sure to add some <BR> tags to make yourself a few blank lines between text. <BR><BR><A href= Click Here to Go To Google! </A> The tag is <A>, the attribute is href, the text in between the tags is the actual link that shows on the web page for the user to click on, and we only close the tag, which is </A>. Save and Check It Out! Revised June 2008 Online PD Basic HTML DMasonDesigns

23 Online PD Basic HTML 12/22/2017 Adding an Link An link is almost like the hyperlink, just changes a little. <BR><A Click here to contact me! </A> Now add an link using your address under the Google link. It may help to add some spaces between lines to make your code easier to read… add <BR> tags before the tag! If you don’t have , use mine: Save it and Check It out! Revised June 2008 Online PD Basic HTML DMasonDesigns

24 Adding Lists to Web Pages
Unordered Lists Ordered Lists Revised July 2009 Basic HTML

25 Unordered Lists Unordered lists are shown with a “bullet.”
To begin the unordered list, use the tag <UL> Each item in the list must also have a tag, <LI> and an end tag </LI> after it End the list with the close tag </UL> Revised July 2009 Basic HTML

26 Unordered List Example
Notepad Internet Explorer Revised July 2009 Basic HTML

27 Unordered List Make an unordered list of YOUR favorite fruits using the tags on the previous slide. Revised August 2008 Online PD Basic HTML

28 Ordered List Ordered lists are shown with numbering added
To begin the ordered list, use the tag <OL> Each item in the list must also have a tag, <LI> and an end tag </LI> after it End the list with the close tag </OL> Revised July 2009 Basic HTML

29 Ordered List Sample Notepad WEB PAGE Revised July 2009 Basic HTML

30 Online PD Basic HTML 12/22/2017 Ordered List Make an ordered list of YOUR favorite fruits using the tags on the previous slide. Revised June 2008 Online PD Basic HTML DMasonDesigns

31 Save is one last time and CHECK IT OUT!
Revised August 2008 Online PD Basic HTML

32 Online PD Basic HTML 12/22/2017 Debra Mason Information and Communication Technology II Northwest Rankin Middle School Flowood, MS 39232 Revised June 2008 Online PD Basic HTML DMasonDesigns

Download ppt "Let’s Try It! Open Notepad"

Similar presentations

Introduction to Web Design Lecture number:. Todays Aim: Introduction to Web-designing and how its done. Modelling websites in HTML.

Introduction to Web Design Lecture number:. Todays Aim: Introduction to Web-designing and how its done. Modelling websites in HTML.
HTML popo.

HTML popo.
Internet Services and Web Authoring (CSET 226) Lecture # 5 HyperText Markup Language (HTML) 1.

Internet Services and Web Authoring (CSET 226) Lecture # 5 HyperText Markup Language (HTML) 1.
Html: getting started HTML is hyper text markup language. It is what web browsers look at on the Internet. HTML documents should be created in a simple.

Html: getting started HTML is hyper text markup language. It is what web browsers look at on the Internet. HTML documents should be created in a simple.
Unit 3 Day 4 FOCS – Web Design. No Journal Entry.

Unit 3 Day 4 FOCS – Web Design. No Journal Entry.
HTML Creating Web pages. HTML Hyper Text Markup Language Not programming, but a markup language using tags to format text in Web browsers.

HTML Creating Web pages. HTML Hyper Text Markup Language Not programming, but a markup language using tags to format text in Web browsers.
Web Page Development Identify elements of a Web Page Start Notepad

Web Page Development Identify elements of a Web Page Start Notepad
Creating a Web Page HyperText Markup Language. HTML Documents  Created using any text editor  Notepad  Vi, Pico, or Emacs  If using word-processor,

Creating a Web Page HyperText Markup Language. HTML Documents  Created using any text editor  Notepad  Vi, Pico, or Emacs  If using word-processor,
HTML Lesson 1 TBE 540 Farah Fisher. Prerequisites Before beginning this lesson, the student must be able to… Access web pages and navigate the web Access.

HTML Lesson 1 TBE 540 Farah Fisher. Prerequisites Before beginning this lesson, the student must be able to… Access web pages and navigate the web Access.
HTML: PART ONE. Creating an HTML Document  It is a good idea to plan out a web page before you start coding  Draw a planning sketch or create a sample.

HTML: PART ONE. Creating an HTML Document  It is a good idea to plan out a web page before you start coding  Draw a planning sketch or create a sample.
HTML Basics An Introduction to HTML. What is HTML? Stands for “Hyper Text Markup Language” Composed of “tags” which are surrounded by sideways triangles.

HTML Basics An Introduction to HTML. What is HTML? Stands for “Hyper Text Markup Language” Composed of “tags” which are surrounded by sideways triangles.
HTML. Goals How to use the Komodo editor HTML coding and testing – List and Images – Tables and Links – At least 2 pages and navigation –

HTML. Goals How to use the Komodo editor HTML coding and testing – List and Images – Tables and Links – At least 2 pages and navigation –
Basic HTML The Magic Of Web Pages. Create an HTML folder  Make a folder in your H drive and name it “HTML”. We will save EVERYTHING for this unit here.

Basic HTML The Magic Of Web Pages. Create an HTML folder  Make a folder in your H drive and name it “HTML”. We will save EVERYTHING for this unit here.
HTML. We’ll learn … What HTML is What tags are What a basic web page looks like What 3 HTML tags are required What HTML comments look like How to title.

HTML. We’ll learn … What HTML is What tags are What a basic web page looks like What 3 HTML tags are required What HTML comments look like How to title.
McGraw-Hill/Irwin Copyright © 2013 by The McGraw-Hill Companies, Inc. All rights reserved. Extended Learning Module F Building a Web Page with HTML.

McGraw-Hill/Irwin Copyright © 2013 by The McGraw-Hill Companies, Inc. All rights reserved. Extended Learning Module F Building a Web Page with HTML.
1 CSC 121 Computers and Scientific Thinking David Reed Creighton University HTML and Web Pages.

1 CSC 121 Computers and Scientific Thinking David Reed Creighton University HTML and Web Pages.
More Basic HTML. Add spacing (single & double space) Save Refresh Add horizontal rule Add comments Add styles Add headings Add features Add alignments.

More Basic HTML. Add spacing (single & double space) Save Refresh Add horizontal rule Add comments Add styles Add headings Add features Add alignments.
Html Basic Codes Week Two. Start Your Text Editor Windows use 'Notepad’ Macintosh use 'Simple Text'

Html Basic Codes Week Two. Start Your Text Editor Windows use 'Notepad’ Macintosh use 'Simple Text'
15.2 More Basic HTML. More Basic HTML Add spacing (single & double space) Save Refresh Add horizontal rule Add comments Add styles Add headings Add features.

15.2 More Basic HTML. More Basic HTML Add spacing (single & double space) Save Refresh Add horizontal rule Add comments Add styles Add headings Add features.
Getting Started with HTML Please use speaker notes for additional information!

Getting Started with HTML Please use speaker notes for additional information!

Similar presentations

Ads by Google