Let's Try It!: Open Sublime Editor

Let’s Try It!
Open SUBLIME EDITOR

o Start > All Programs > Accessories >
sublime text
o Don’t get WordPad by mistake – won’t
work the same
Revised June 2008 Online PD Basic HTML 1

Typing in sublime text
 Type the following tags in sublime text: (don’t forget the brackets!)
<HTML>
<HEAD>
<TITLE>My First Web Page</TITLE> NOTE: “practice .htm”1
</HEAD> This is the number 1, not a small “L”
<BODY>
<BR>This is my very first web page.
<BR>My name is Debi Mason. (but put your name!)
</BODY>
</HTML>
 Save this page as “practice” with the default extension ‘.txt’ and then
save a second time with the same title “practice1.html” BE SURE to
add the file extension ‘.html’ the second time or it won’t show as a
web page.
 Now just minimize this file because you will use it again later.

Viewing Your “practice1.html” Page
 Once your practice file is saved, you can view it the web
browser you have open (should be Chrome).
 In order to open your html file – click on the file with the
extension .html. This should automatically open the file in
our internet browser.
 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!

“practice1.htm” File
If yours does not look like mine, correct your code as
necessary:
o Open the file in sublime text again.
o Make the corrections (called “debugging” code!)
o File > Save
o 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!)
o Keep working and debugging your code until it is correct.

Formatting Text
Bold, Italics, and Underlining

practice2.htm
Under your line with your name, add:
o This is a practice sentence to make the text bold.
and make the word “bold” ,well…, bold.
<B>bold.</B>
o You may need to refer to the Sample Web Page to
see examples.
o Now do the same with This is a practice sentence
to make the text italics. and make “italics” in
italics. <I>italics.</I>
o Now type This a practice sentence to make the
text underlined. <U>underlined</U>
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!

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!

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!

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 10

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>

 Don’t add anything after the </BODY> or </HTML> tags – those
should always be the last tags on your page!
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="3">This is font size 3 (This is the default font size of
most Web browsers.) </FONT>
 The <P> tag double spaces!

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,
o <BODY bgcolor= “yellow”>
o 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.
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”>
o Your background color will still be yellow, but your text
will be blue.
Save and Check It Out!

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:
o <FONT color=“green”>
o 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!

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
o <H1 align=“center”>My First Web
Page</H1>
o Save and Check It Out!
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

Adding Images to Web Pages
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 Documents and Save in your HTML folder (NO
SPACES!)
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.

Adding Hyperlinks to Web Pages
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=http://www.google.com> 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>.
Adding an Email Link
An email link is almost like the hyperlink, just
changes a little.
 <BR><A href=“mailto:judy.lanyon@lamarcountyschools.org”> Click
here to contact me! </A>
Now add an email link using your school email
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!
Save it and Check It out!

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

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>

Unordered List Example
sublime text
Internet Explorer

Unordered List
Make an unordered list of YOUR

favorite fruits using the tags on the
previous slide.

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>

Ordered List Sample
sublime text
WEB PAGE

Ordered List
Make an ordered list of YOUR favorite

fruits using the tags on the previous
slide.

Save is one last time and
CHECK IT OUT!

Debra Mason
Information and Communication Technology II
Northwest Rankin Middle School
Flowood, MS 39232
debra.mason@rcsd.ms

Let's Try It!: Open Sublime Editor

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Let's Try It!: Open Sublime Editor

Diunggah oleh

Hak Cipta:

Format Tersedia

Let’s Try It!

Open SUBLIME EDITOR

Revised June 2008 Online PD Basic HTML 1

Revised June 2008 Online PD Basic HTML 2

Revised June 2008 Online PD Basic HTML 3

Revised June 2008 Online PD Basic HTML 4

Bold, Italics, and Underlining

Revised June 2008 Online PD Basic HTML 7

Revised June 2008 Online PD Basic HTML 8

Now let’s discuss page backgrounds.

Revised June 2008 Online PD Basic HTML 9

Add the attribute bgcolor=“yellow” into

Revised August 2008 Online PD Basic HTML 10

 Type the following information after your last sentence added:

 <H1>This is the H1 tag in use.</H1>

 <P><FONT size="6">This is font size 6</FONT>

 The <P> tag double spaces!

text=“blue” is an attribute of the BODY tag if you

Revised June 2008 Online PD Basic HTML 14

Revised June 2008 Online PD Basic HTML 15

You can also choose to center paragraphs or

Save and Check It Out!

Revised June 2008 Online PD Basic HTML 17

Revised June 2008 Online PD Basic HTML 20

Save it and Check It out!

Revised June 2008 Online PD Basic HTML 23

Revised July 2009 Basic HTML 24

Unordered lists are shown with a

Revised July 2009 Basic HTML 25

Revised July 2009 Basic HTML 26

Make an unordered list of YOUR

Revised August 2008 Online PD Basic HTML 27

Ordered lists are shown with

Revised July 2009 Basic HTML 28

Revised July 2009 Basic HTML 29

Make an ordered list of YOUR favorite

Revised June 2008 Online PD Basic HTML 30

Revised August 2008 Online PD Basic HTML 31

Revised June 2008 Online PD Basic HTML 32

Anda mungkin juga menyukai